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:

1. 
   Hover over the header 
2. Click “Header” 
3. 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.

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:

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:

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.

Related Articles