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
(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
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
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.