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.
