Sticky headers are a great way to create a website that’s easy to navigate on a computer. It’s easy to build a sticky header in WordPress with the WPHubSite Theme Sticky Header Pro Module.
In case you’re not familiar with what a sticky header is, scroll down on this page and notice that the header goes with the page. It only works on the desktop (on purpose) but mobile devices have other (better) ways of handling quickly accessing the top of a page (and the menu too).
You can create the same effect by activating the Sticky Header pro module. After you do that then you can configure the sticky menu to perform how you’d like.
Ready to make your header sticky?
Let’s go!
Step 1: Hover over (or click on) Appearance in the WordPress admin dashboard menu.
Step 2: Click on Customize.
Step 3: Click on Header in the Customizer menu.
Step 4: Click Sticky Header.
Step 5: Select this box to turn on the sticky header for your website.
Option 6: Select this box if you’d like to use a different logo than your main logo for your sticky header.
Option 7: If you chose to use a different log for your sticky header, click this box to upload the unique sticky logo.
Option 8: Select this option if you’d like to use a different sticky header logo for retina devices. Be sure to also upload the image if you select this option.
Option 9: Choose a custom width for your sticky header logo or leave this setting alone if not.
Option 10: Select this box if you’d like the header to shrink down as users scroll down. This option is nice to free up screen real estate and we have it enabled on this website if you’d like to see how it looks.
Option 11: Select this option if you’d like the header to disappear when scrolling down but reappear when scrolling up. I’d recommend against using this option as it’s somewhat awkward but it’s there if it fits into your plan.
Option 12: Select the animation for the sticky menu when it appears.
Option 13: Choose where you’d like to enable the sticky header (desktop, mobile, or desktop + mobile). Keep in mind that mobile devices have limited screen real estate so a sticky menu can make your website extremely difficult to use.
Step 14: Click the Publish button to make your sticky menu live.
That’s it! Once you publish the sticky menu settings then you’ll have a super cool sticky menu on your WPHubSite WordPress website.
There are also other settings for the sticky menu that you can control independently of the regular menu (when you’ve scrolled to the top of the page). You can control the following sticky header colors:
- Header: Choose colors for the background, site title, and tagline.
- Menu: Choose colors for the link/text color and background color for menu items.
- Submenu: Choose different link/text colors and background colors for submenu items.
Here’s the sticky menu we created on our demo website without any color options changed.
