How to change header menus when page is scrolled

At one point, I had a site with a really long page and various sections. In order to optimize the UX and allow the user to scroll to the section of the page they wanted to navigate to without having to scroll the entire page and search, we wanted to make the sticky header menu change when scrolled to a new menu with anchor texts that allowed the user to jump to the section of the page they wanted when viewing the page on desktop.

Using Beaver Themer, I created the header and then inserted the different menus and gave them the ids "menu-one" and "menu-two".

I then used this simple CSS to ensure the correct menu displayed when landing on the page and the opposite menu appeared when scrolling.

@media only screen and (min-width: 992px)
{
header #menu-two { display: none; }

header.fl-theme-builder-header-scrolled #menu-two { display: block; }

header.fl-theme-builder-header-scrolled #menu-one { display: none; }
}

/* since I only wanted this functionality on desktop, this section ensured the menu switcheroo didn't happen on mobile */

@media only screen and (max-width: 992px)
{
header #menu-two { display: none; }

header.fl-theme-builder-header-scrolled #menu-two { display: none; }

}

This allowed for greater use of ease for the website visitor navigating the page.

Want to ensure your site stays secure and maintained without you having to do the heavy lifting?

See how we can save you time, money & free you up to pursue your passion & focus on what you do best.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top