Posted on 3/24/2015 in UX and Design
By Tim Hawkins
Are you looking to spruce up your website while making it more accessible to users at the same time? The increasingly popular trend of fixed navigation bars may be the solution for you! A fixed navigation bar, or “fixed header” is functional for both desktop and mobile users across most browsers. Fixed headers allow the user to scroll the page, while still maintaining the ability to instantly navigate to any point in your website. This has become a very popular way to setup a navigation that gives your users the flexibility they need to move across the site from anywhere on the page. Similar to the Wakefly website you are using now.
A fixed header, like anything, has its pros and its cons. First, we’ll take about the pros of a fixed header. One of the main arguments for a fixed header is user accessibility. Having the navigation follow a user down the page allows them to navigate to other pages without having to scroll back up to the top of the page or the footer. This addition to your site can make navigation 22 percent faster according to usability studies. Users claimed to spend less time clicking around the page when using a site with a fixed header. This of course is great to hear from users because that means they can find what they need on your website, faster.
The main negative point of a fixed header is that it takes up space. When scrolling down a page, the user loses some screen space to the fixed header on the top. Fortunately since phones and desktop screens are getting so large, this issue is usually not noticed by most users. There are some users working on smaller screens that should be taken into consideration. Finding out what devices your users are on would be a good idea before implementing a fixed navigation.
Setting up a fixed header is a very simple process. All it takes to setup a fixed header are a few CSS adjustments to your header or navigation element. Setting up a fixed header is not a complicated process and can be done with minimal HTML and CSS knowledge, but some knowledge would be helpful. There are plenty of resources online to help you get a fixed navigation working on your website.