How to Create the Sticky WordPress Header and Navigation

How to Create the Sticky WordPress Header and Navigation

In today’s web design world, the sticky header or navigation has become a stylish option and many successful websites and platforms adopt this design, such as CNN, Google Plus, Facebook and Sony. Personally, this kind of design is pretty useful for some scroll-required webpages, which ensures that your navigation bar and important header section are always visible and easy to access.

To achieve this goal, you have multiple choices. Here, if you do not want to spare time coding your fixed header and styling your current template, you can leverage some useful plugins. In the following, we’d like to unveil the easy steps about how to create the sticky WordPress header and navigation.

Why Create the Sticky WordPress Header and Navigation

In fact, you can enjoy a lot of benefits by doing so. You can check some of them in the following.

  • As the speedy and easy access to the website navigation is important now, this practice allows people to navigate through your site effortlessly, resulting in the great user experience.
  • If you display your carefully designed logo in the header section, having a sticky display can be beneficial for your brand awareness.
  • As researched and tested, having the sticky header or navigation can effectively lower the bounce rate and result in more page views or daily traffic.

However, there is also a drawback of this kind of design, giving people the ability of browser faster over your site. In this case, your readers may ignore the critical information on your landing page or homepage. Therefore, before achieving the sticky design, you firstly need to figure out whether it is suitable for your site.

Sticky Header

How to Create the Sticky WordPress Header and Navigation

To achieve the sticky feature for your header section or the navigation bar, we have introduced two options in the following. You can choose the better method that is suitable for your website needs and your advanced skills.

Utilize the ThematoSoup Sticky Header Plugin

This plugin is pretty suitable for common webmasters or the newbies to achieve the sticky header or navigation for any WordPress template, so readers can browse faster and check more web contents quickly.

After installing this ThematoSoup Sticky header plugin, yon do not need to do any further configurations for this plugin. Instead, you can directly modify your theme using the default WordPress theme customizer. For this, you should click Appearance > Customize button in the admin panel of your WordPress site.

In the customizer, you can preview your current template and hit the buttons in the left navigation bar for customization. Here, you should click the Sticky Header by ThematoSoup button.

Sticky Header by ThematoSoup Button

Now, you can upload your customized logo that you want your readers to keep in mind all the times while visiting your site. Here, you simply need to click the Select Image button for uploading. Note that for the proper display, the height of the image needs to be 30 px. Also, you can remove and change the logo freely.

Select Image

Next, you need to make your navigation bar displayed in a sticky manner. Here, you simply need to choose your target navigation menu from the drop-down list. For the better display, you can also determine the background color as well as the text color for the navigation. Personally speaking, they need to match the color scheme used in your webpages. Even, if you want, you can determine the maximum width for the sticky display.

Choose Navigation

Now, you can save and publish the changes. Check the final result in the following.

Sticky Header Sample

Utilize the Awesome Sticky Header Plugin

As compared with the first option, the Awesome Sticky Header plugin can be viewed as the advanced option, which ensures the maximum control over the sticky navigation and header of your site. Upon the installation, you need to click Appearance > Awesome Header button to enter the plugin’s settings page.

Here, you should decide some general settings for these sticky displays.

  • Scroll Position – the page scrolls down in which pixel, the sticky header and navigation can be displayed.
  • Header Width – the container width of the header section.
  • Full Stretch – whether to 100% stretch the header to the full browser width.
  • Header Position – the exact header location among the options of Center, Left and Right.
  • Description – display or hide the website tagline.

Awesome Sticky Header General Settings

Next, you need to click the Header button. Here, you can choose the navigation and upload the logo that will be showcased in the sticky header. In addition, you can decide more detailed settings for the better showcase.

For instance, you can decide the menu depth for sub-navigation, the logo type among the options of image, text and website title, the exact pixel of menu padding and logo padding, the exact menu position, the color scheme for the sticky header and many more.

Awesome Sticky Header Navigation Settings

Even, you can click the Extra button to decide the transparency level for the sticky display.

Awesome Sticky Header Extra Settings