Developers

How to Make Your Top Menu Disappear on Scroll

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.

What Is RebelMouse?
Request a Proposal
subscription model for publishers
Rebel Insights

In 2023, Publishers Take Back Control With Subscription Success

Users are ready to pay for content that delivers

The Rise of the Mature User

It's been a long and winding path, but in 2023 the subscription model continues its upward trajectory as a top revenue strategy for publishers of all sizes. The tug of war between platforms and publishers reached its peak in the last few years of the previous decade, leaving users desperate for a modern user experience that's clear of any clutter from the duopoly that is Google and Facebook. This is why intelligent paywall models are a top choice for users looking to consume content right from the source. When done correctly, the strategy can work for any type of media. The New York Times, a frequent showpiece example of the power of paywalls, is constantly reporting record-busting subscription numbers, with 7.6 million digital subscriptions in 2021.

And it all makes perfect sense. The subscription model eliminates the middleman — such as the platforms — so readers get the experience and content they want, and publishers get the cash they need.

Keep reading...Show less
The Most Secure CMS of 2023
Featured

The Most Secure CMS of 2023

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Keep reading...Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now