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.
Hi Charlesr,
thanks a lot for posting the code.
It works fine, when I use it.
However, as the header has a certain height, it overlaps the respective start of a section, whenever I use the menue to jump to a certain anchor point (= start of a section).
Do you have any solution as to fix it?
I see two options but have no clue as to implement them:
Option 1:
Anchor point needs to be placed higher by the height of the header
Option 2:
positioning of the header needs to be adapted somehow.
It would be great, if you could get back to me.
Kind regards,
Johanna
I think I solved this at one point. I’ll try and remember. I’ll get back to you in the morning. Hassle me if I forget!
Ok, so the easiest way to sort this is to use this plugin: https://wordpress.org/plugins/page-scroll-to-id/ (Page Scroll to ID). It has a setting for “offset” in which you tweak the value until it the anchor arrival looks nice. It also has an option for scrolling to an anchor smoothly when you arrive from a different page which is cool.