Close

Copyright © RebelMouse 2019

Follow Us:

How to Make Your Top Menu Disappear on Scroll

Create an un-sticky Top Bar using Layout & Design tool

Depending on how you structure your content, it can be helpful to have your site's header and menu bar disappear as readers scroll. We call this un-sticky Top Bar behavior. Here's an example of what this looks like:


This feature can be added set up in our Layout & Design tool using the Show On Scroll element. Once it's in place, you need to create a placeholder top navigation menu that readers will not be able to see.

First, place all items contained by the Navbar element within an Element Wrapper.



Then place the Element Wrapper inside the Show On Scroll element:


Next, create a fake header as an Element Wrapper. Set it to the same height as the Top Bar for each viewport. (e.g., height: 60px; margin: 0;)

It's a good idea to assign it a Friendly Name so you can differentiate it, such as "Navbar Dummy Placeholder."

Here's an example of how the fake header appears in developer view:

Using a dummy placeholder saves time because it's only added once and applied across your site, instead of having to add a margin to every page's first element. More importantly, if you need to implement an ad below the Top Bar element, you would have to edit every page to remove the margin, and then add the margin to the ad placeholder instead — an issue that's avoided entirely with this method.

You can see this feature live on Mother.ly and Popdust. If you have any questions about implementing this for your site, email support@rebelmouse.com or contact your account manager today.

RebelMouse CEO: Reimagining Diversity “Starts in the Office”

Why women, minorities, and the LGBTQ+ community will restructure workplace norms

Entering a new decade means a new opportunity to change how we approach diversity. In a joint interview alongside Leanne Pittsford of Lesbians Who Tech, RebelMouse founder and CEO Andrea Breanna said that the only way to fight patriarchal dominance is to encourage and nurture more women, minorities, and members of the LGBTQ+ community in the workplace, particularly in tech.

Over half of RebelMouse's employees are women or identify as LGBTQ. Read our full diversity and inclusion report here.

Check out the full video below.

Related Articles

Publishers No Longer Have to Submit Their Site to Google News

Google's Publisher Center creates new opportunities for audience growth

Just before the start of the next decade, Google announced an important change to its Google News offering with the launch of Google Publisher Center. The new interface merges Google News Producer and Google News Publisher into one to streamline the partnership process for publishers.

Overall, the change should make it easier for publishers to manage their Google News settings, including updating themes, directing URLs to section pages, and configuring user permissions. Read the full list of features here.

Keep reading...

How to Find Work-Life Balance as a Remote Employee

Tips from our CEO on making the most of an office-free lifestyle

Working from home is becoming increasingly popular, with an estimated 66% of companies now allowing remote work and 16% operating completely office-free. RebelMouse is one of those fully remote companies, and over the years we've mastered how to stay close to each other despite being spread across more than a dozen countries. We believe working remotely is good for both our personal lives and our productivity. Read more about this here.

Still, working free from the shackles of an office environment doesn't mean every day is a dance party in your pajamas from 9 to 5. Working from home comes with its own set of challenges just like any other job.

Keep reading...
Subscribe to Our Newsletter