I had a customer ask me how to create a sticky header in Socrates. While we had sticky navigation in old versions of WordPress it was not used much at all. So I didn’t add to Socrates 5.
You’d want to use a child theme for this customization so the changes won’t get overwritten and you need a 3rd party plugin. However, if you only want to stick “one” element you won’t need to customize.
Step 1: Install this Sticky Menu plugin
Step 2: If you just want to stick the header or navigation you just need to go into the Plugin’s settings and set a “Sticky Element”.
You’d use either #header or #navigation.
You CAN’T do both.. and our navbar is not inside the header div. So here’s the solution for that.
Step 3: You need to add a new div to /socrates-v5/header.php. (child theme is recommended so changes won’t be overwritten in next update).
On line 29 above <header id=”header add this code
<div id="stickyheader">
(note an extra </div> might be created when you do.. remove it)
On line 63 make a line break and right above <div id=”main” class=”site-content”> add this closing div
</div>
Then in the Sticky plugin settings you’d enter #stickyheader as the sticky element.
One more tip. If you’re mobile menu is displaying ABOVE the sticky navbar add this to custom CSS
#mobile-navigation-menu {
display: none;
position: fixed;}
That’s it.. The header and navigation will now stick to top when scrolling.
Very useful the Sticky Header Dan – thanks.
Not used it yet but I have a project coming up where I will.