How to Create a Fixed Header in WordPress

The WordPress header is one of the most useful navigation items on your site. From here, you get quick access to the homepage, your site categories, and any other quick links you’ve chosen to incorporate. However, it disappears as soon as the user begins to scroll down. Wouldn’t it be great if this functionality was available to a website visitor all the time? If you’ve been noticing the latest web trends, you can see that many sites now incorporate a “fixed” header bar that sticks around at the top of the site even when you’re scrolling down. It helps users quickly navigate on your website without having to scroll back up. This has an impact on your total engagement as well as the bounce rate.

In this article, I’m going to show you how to create a fixed header in WordPress using nothing but CSS. There are slightly more complex techniques involving JavaScript where the header sticks to the top only after scrolling down a bit, and I’ll cover that a later article. One thing to keep in mind is that it’s impossible to give exact code for every single theme. You need to customize the various heights by playing around with your own site and coming up with values that make sense for you.

Getting the Header Information

The first thing you need to do is identify the CSS handle of the element you want to float at the top of your screen. For some websites, this will be the section containing the site’s name as well as the logo. On others, it will be just the primary navigation menu. On my site for example, I have a category menu sitting below the title bar. In my situation, I want the menu to float at the top and not the actual header as such. Using Google Chrome developer tools, it’s easy for me to identify the exact element representing my menu:

You can see the screenshot above, that for me it’s identified with the #nav element. So I go into my custom CSS file and paste the following code:

#nav {
            position: fixed;
            top: -10px;
            width: 100%;
            z-index: 5000;
}

The first and third properties are pretty self-explanatory. The “top” value is obtained by trial and error. Google Chrome allows you to dynamically adjust the values in its CSS toolbox so you can get just the right height at which you want your navigation bar to be fixed. The last value called “z-index” is set to an extremely large value indicating that you want this element to always be displayed on top of any other existing HTML content – which makes sense since the bar always has to be visible.

Moving the Body Down

The above code causes problems with my website because the navigation bar overlaps the header right at the top when my site is first displayed. Due to this, I want to shift the entire “body” content down a bit so that my floating menu doesn’t cover my site title. This is easily achieved by adding a bit of top padding to my “body” element like this:

body {

         padding-top: 3rem;

}

I use “rem” above instead of pixels (px) because I wanted to scale with varying screen sizes. With the above two pieces of CSS, my site navigation bar sits at the very top with the header getting pushed down a little bit:

Moreover, you can see that it continues to remain at the top of the screen even when I scroll down to display more content:

Adjusting for Mobile Screens

You might run into problems with mobile screens since the height of the navigation bar changes due to fitting all of the elements inside. As a result, you’ll probably have to move the “body” element even further down to compensate. For this, we have to create CSS especially for mobile screens. Luckily for us, doing so is extremely simple as I explained in an earlier tutorial.

Having the header or a navigation menu always visible to users saves them the effort of sometimes scrolling back up large amounts just to reach it. Overall, it improves your site usability as well as reduces your bounce rate.