Sticky Navigation

  • Have you experienced this before? You’re clicking through the pages on a website looking for a specific piece of information and after scrolling to the bottom of yet another page that you’ve scanned, you’re ready to move on to the next page. But wait, where’s the navigation menu? Oh right, it’s all the way back at the top of the page. If the pages are filled with content, it can take a while to get back up there and you can really end up giving that scroll-finger a workout. If only the designer of this site had thought to include a sticky menu!

    Don’t let your users suffer from scroll-finger fatigue... Sticky navigation to the rescue! Sticky navigation can go by many names: fixed navigation, sticky header, persistent menus, but they all deliver the same great benefit to your users… Convenience.

    There are three main types of sticky navigation that you’re likely to encounter. They all serve the same purpose, but depending on the design, one may be preferable over the others.

     

    Traditional Fixed Menu. 
    This is a throwback to the old-school days of building websites using frames. When the page loads, the traditional fixed header starts at the very top or far left of the screen, and that’s where it stays as you scroll through the site. It remains FIXED in place.

    Check out these Design Ready Templates that have Traditional Fixed Menus:

    The Peek-a-Boo Menu. 
    The Peek-a-Boo menu is sneaky. Upon first loading the page, the navigation menu behaves like any other part of the page. When you scroll, it moves. Until you scroll past it. Just when you feel like all hope of convenient site navigation is lost, the Peek-a-Boo menu gently slides back down from the top of the page (sometimes styled slightly differently than when you last saw it).

    Check out these Design Ready Templates that have Peek-a-Boo Menus:

    The Docking Menu.
    The Docking menu is similar to the Peek-a-Boo menu, but it never leaves you hanging. It will scroll like the rest of the elements on the page until it satisfyingly docks into its fixed position at the top of the screen.

    Check out these Design Ready Templates that have Docking Menus:

    Give those scroll-fingers a rest and make sure your next design includes some type of sticky navigation!