If you are using the excellent OceanWP theme for WordPress, then you might like to have a free OceanWP sticky header so the menu is always available at the top of the page for your visitors. You can do this yourself in less than five minutes!
There are various paid plugins that do this, but it’s pretty easy to code in CSS yourself for free, not just for the header but for any element.
Go to your homepage while logged in and press “Customise” in the WordPress admin bar at the top:
Then press “Additional CSS”:
In the box that appears, paste the following code and press Publish 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 OceanWP sticky header will work on both desktop and mobile versions.
Explanation for that OceanWP 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 ID of the header div element. So we put a “#” at the start to say we are looking for an ID.
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, or you might need to apply your own via a class. Use the Chrome Inspect tool to find out.
Running Google Adsense?
Check that your ads don’t get confused by the sticky areas.
