If you are using the 2024 theme for WordPress, then you might like to have a free 2024 theme sticky header so the menu is always available at the top of the page for your visitors. This is pretty easy to do yourself in just a few minutes!
There are various paid plugins that do this, but it’s super easy to do in CSS yourself for free, not just for the header but for any element.
Go to your homepage while logged in and press “Edit site” in the WordPress admin bar at the top:
Then press the “List view” button (circled in orange below):
Then select the “Header”:
Then on the right had side, you should see the block’s settings panel – if you don’t see it, click the settings button at the top right, which looks like a screen with a sidebar. In the block’s advanced settings, look for “Additional CSS Class(es)”. Put “site-header” in there and press save:
Then press the style button – it’s the one that looks like a circle with one half black and the other half white – and then click the three dots in the styles box (not the three dots at the top!) and click “Additional CSS”:
In the box that appears, paste the following code and press Save at the top of the page:
/* sticky header */
.site-header {
top: 0;
position: sticky;
width: 100%!important;
}If you are using cache on your site, you’ll need to clear that before visitors can see the results – check in an incognito window.
The CSS code for the WordPress 2024 theme sticky header will work on both desktop and mobile versions.
Explanation for that 2024 theme sticky header CSS:
The first line is a CSS Comment – anything within the /* and */ will be ignored, so you can write whatever you want in there.
“site-header” is the class of the header div element (we gave it that class ourselves remember). So we put a “.” at the start to say we are looking for a class.
Then everything within the curly brackets { } is what we want to be applied to the site-header.
top: 0 means it needs to be applied to the top of the page.
position: sticky means hold the element in place while you scroll.
People used to use position: fixed, but this didn’t apply any adjustment to the following content, so you’d have to adjust for the overlap with further code. position: sticky is much more simple.
width: 100%!important; This line makes sure that even if drag a tab from one screen to another or turn your phone from portrait to landscape, the stuck header resizes properly. I found I needed the “!important” override on some sites.
Adapting the sticky header code for other themes:
If you are using a different WordPress theme, the header area will have a different class name, so you’ll need to change “.site-header” in the code to whatever your theme is using for the header element. Use the Chrome Inspect tool to find out, or apply your own.
Running Google Adsense?
Check that your ads don’t get confused by the sticky areas.
