Create A Sticky Header With The WPHubSite Theme Sticky Header Pro Module

Build your website integrated with HubSpot on WPHubSite. It's the best all-in-one WordPress-based HubSpot website builder and it's free.

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.

Open the WordPress Customizer.

Step 3: Click on Header in the Customizer menu.

Access header settings.

Step 4: Click Sticky Header.

Open the Sticky Header options.

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.

Customize the sticky header options.

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.

Demo of the WPHubSite Theme sticky header.

Last Updated On November 16, 2020


Tag(s): , ,

Grow your business with the power of WordPress & HubSpot.

Get WPHubSite for the most powerful web platform integrated with the power of HubSpot for your inbound marketing strategy.