A handful of 7.0 templates support fixed headers with their built-in features, and for the rest we’ll have to rely on custom CSS.
First things first, let’s determine if the template you’re using has the fixed header option and how to activate this feature.
Adirondack
- Go to Design > Site Styles and underneath Navigation, check Always Show Nav
- When you scroll down the site, the header will collapse and the logo will be replaced with the site title.
Flatiron
- Go to Design > Site Styles and underneath Site Header, select Header position: Fixed
Momentum & Skye
- The header is always fixed in these templates
Supply & Wells
- The sidebar navigation is always fixed on these templates
If you’re using a template other than the ones above, we’ve put together some custom code for some of the most popular 7.0 template families. Find your template family below, copy the custom CSS and head over to Design > Custom CSS and paste it in.
Brine
Now that you have a fixed navigation, let’s deep dive into the code to learn how it’s working and how you can customize it.
First, you’ll notice that the first line of code is different for each template. This is because each 7.0 template family is unique so we’ll need to target the class your header is contained in.
For example, a Brine family template’s header lives within the “Header” class and a template under the York family has its header within the “site-header” class.
.Header { position: fixed !important; z-index: 1000; width: 100%; }
Next, we have the code that is forcing the header to stay at the top of the page making it “sticky” or fixed. The “!important” flags it as important to override any other instructions within the code.
.Header { position: fixed !important; z-index: 1000; width: 100%; }
The z-index attribute ensures that the header is on top of all the other page elements so it’s always visible as the user scrolls.
.Header { position: fixed !important; z-index: 1000; width: 100%; }
Last but not least, the width function makes sure the header navigation takes up the full width of the screen. If you would like to set your header to a different width, you can change that percentage here.
.Header { position: fixed !important; z-index: 1000; width: 100%; }
Once you have that applied to your site, you’re all done!
Adding a fixed header to your site is a great navigation tool for your users and looks pretty cool, too. 🙂
The theme customization options are very limited and I can’t even find where to turn off the sticky header. We deactivated all plugins to see if there was an issue there [including the Accessibility plugin] and nothing except there is one called “Theme Support” that when deactivated, it completely removes everything but the header/menu’s from the page. When I go into that plugin, that’s where some theme settings are but nothing about a sticky header.
Any ideas?
- This topic was modified 1 year, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
The page I need help with: [log in to see the link]
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:
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.
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.
How do I make my header stay at the top?
The header component needs to be turned into a top-level container, with z-index: 1; and position: fixed; In this way it will remain sticky at the top when you are scrolling.
How do I fix the header to the top of the screen in HTML?
To make the header take up the whole top of the screen in HTML, you can use CSS to set the margin and padding of the body and header elements to 0, and then set the height of the header to 100vh. This will ensure that the header takes up the entire viewport height.
What is the position sticky or fixed for header?
Components - Sticky headerSticky content is one that will stay positioned once the user scrolls past it [i.e: stuck in position]. Unlike position: fixed; , sticky content is limited by its container and will stop scrolling once the end of the parent element is reached.
How do you make a header sticky to the top in CSS?
To make the header sticky, we're going to use the CSS property 'position: sticky'. This property tells the browser that the element should stick to the top of the viewport when you scroll down.