This is especially useful on landscape mobile devices (see below). Once you start scrolling, the white space compresses down so the header takes up less space. On initial load the menu has more height to it (see below): On initial load the menu is at the top of the page You can see this type on my wedding photography website. Multiple Menu Styles and TriggersĪn alternative approach to a sticky header is a 2nd menu element or style after the initial scroll from page load. This is by far the easiest to implement, but is by no ways the only way to maintain user navigation on scroll. As you can see when scrolling, the entire header of my site stays in place. For this site, I have opted for the most common that I have observed. There are a few common options for sticky menus out there. Options for Sticky WordPress Menu CSS + JS + HTML
#HOW DO I MAKE CSS3 MENU PAGES WORK ON MY SITE HOW TO#