How To Create A Sticky Header

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.