How To Create a Fixed Header

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:

Using Duda, a web pro-oriented website builder with built-in hosting
Using WordPress and other theme-based platforms
Using CSS and JavaScript

How to create a fixed header in Duda

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:

Hover over the header
Click “Header”
Select ”Set As Sticky Header”

How to create a fixed header in WordPress

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.

How to make a fixed header in CSS & JavaScript

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.

 header {
   background: #fff;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999px;
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}


Or more simply this could work:

header  {
   background: #fff;
   position: fixed;
}

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.

Adjusting CSS Styling

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:

 .header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Page content */
.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement */
.sticky + .content {
  padding-top: 102px;
}

Adding JavaScript

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:

 window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");

var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

A Shortcut Way to Create a Fixed Header

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.

Summing Up

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.