A fixed header (also known as a sticky header) is a smart navigation tool that causes the header of a website to remain at the top of the page as a user scrolls up and down. In other words, the header and site navigation are always on the top of the scrolled page.
A fixed header can give a website a polished look and has the added benefit of saving users time (since they don’t have to scroll up to get back to the main navigation menu). In fact,
one study found websites with sticky headers are 22% faster to navigate than other websites. Obviously, this can translate into a nice competitive advantage given the fact that most consumers on the web have goldfish-like attention spans.
So fixed headers are clearly a great tool to have in the toolbox, but how exactly do you create one on a website?
In this post, we’ll cover three different ways to create a fixed header on a website:
Let’s start with the easiest method first. Creating a fixed header with Duda is very straightforward and much easier than in WordPress or nearly any other CMS platform. Full details on creating all kinds of website headers can be found in our support resources; however, to create a fixed header, simply follow these three steps:
Depending on the WordPress theme you choose to work with, fixing a header to stay at the top of the site can be a little complicated. If you know that you want to use a fixed header in WordPress, the simplest option is to choose a theme that uses one by default — of which there are many, including Flexia, Sydney, Birdfield and more.
However, there are also a number of plugins you can use to create a fixed header, including
Sticky Menu (or anything) on Scroll,
Simple Sticky Header on Scroll
and
Fixed and Sticky Header.
To create a fixed header without the help of a website builder or WordPress theme, you can use CSS and JavaScript.
First, find the header CSS code, which is likely in the directory folder for the header.
Protip: Cut and paste the original code into a separate document in case you want to revert to it.
If you would prefer not to tinker with the directory folder, you can also make custom CSS changes by adding the following code to the floating CSS customization area.
You may find that when you use this method to create a fixed header the spacing is a tad off. If this is the case, you may need to add a little more customization.
For more customization using CSS, you’ll need to start adjusting heights, widths, padding, and/or other areas.
W3 Schools recommends these steps. First, style the header:
Even after styling the CSS, the fixed header may not quite behave the way you want. In this case, you may have to add some JavaScript. Again, here is what W3 Schools recommends:
Instead of setting the padding and/or adding JavaScript, some developers, like Luis Augusto at Dev.to, suggest you use a simple sticky header command.
Fixed headers are incredibly popular on websites today and it’s important for web design professionals to know how to create them. While all three of the methods listed above will enable you to create a fixed header on a site, using a website builder like Duda is by far the easiest. However, even if you’re manual coding an entire site yourself, it shouldn’t be too hard for you to add this handy feature that helps improve user experience.
