What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Generate WordPress Sticky Navigation

How to Generate WordPress Sticky Navigation

The sticky navigation now becomes a common utilization for most large and successful websites or platforms, such as Facebook, CNN, Google Plus and many more. With this special design, you can have your navigation bar displayed and showcased all the times even if people scroll down. Looking to have such a great navigation? In the following, we have introduced the easy steps of how to generate WordPress sticky navigation.

Frankly speaking, there are a lot of benefits you can get from the sticky navigation. Here, we have summarized some obvious aspects in the following.

  • Great user experience – People can always find the navigation menu and browse through your whole site with much ease. This feature is especially useful for some lengthy pages and mobile users.
  • Lower bounce rate – The easier navigation means the lower bounce rate. Even, you can increase the page views as people can jump into different webpages easily.
  • Better site branding – If you have added some visual components on the navigation bar that can reflect the website branding, the sticky display for the navigation bar can boost the brand awareness effectively.

Now, you can check the following to learn how to generate WordPress sticky navigation easily.

Make Use of the Awesome Sticky Header Plugin

Actually, the easiest way to achieve the sticky display of your navigation bar is to utilize the WordPress plugin. Among all the available options, we highly recommend you to try the Awesome Sticky Header plugin that is developed by the DevCanyon. This plugin gives you the ultimate control over the header and navigation bar of your site. With it, you can determine the customized display. For instance, you can get your preferred colors, transparency settings, background, logo and many more.

In addition, there is a live preview of your sticky navigation bar in the plugin settings page of your admin panel. After you make any change, you can check the final result immediately of how the navigation will look like on your site.

Determine the General Settings

This plugin is pretty easy to configure. Here, you simply need to click the Awesome Header button from the Appearance drop-down list. After entering the settings screen of this plugin, you firstly need to click the General tab from the navigation.

Now, you can determine the following settings for the better display of the sticky navigation bar.

Awesome Sticky Header General Settings

  • Sticky Scroll Position – This decides how many pixels are scrolled down to have the sticky navigation displayed.
  • Header Width – This determines the inner content width of the navigation. By default, the navigation will stretch 100% of your browser window.
  • Header Location – You can locate the header on the right, left or the center location. Especially, if your template is not middle oriented for the content, you can make some adjustments.
  • Navigation Description – You can hide or showcase the description of each navigation menu.
  • Sticky Animation – This allows you to slide the sticky header from the top section without the sliding animation.
  • Hover – You can allow the transition effect for the link hover.

Decide the Header Settings

Now, you can click the Header tab to make the further customization. These are the detailed settings for your sticky navigation.

Awesome Sticky Header Settings

  • Choose the Menu – It is possible that you have created multiple navigation bars. If so, you should choose one to become the sticky one.
  • Menu Level – Here, you should decide the depth and level for the sub-menu.
  • Header Logo – For the better website branding, you can upload the logo to your navigation bar, along with the website name or the custom text.
  • Padding – Here, you can determine the exact padding pixels for your menu and logo from the top or the bottom locations. Also, you can decide the menu items padding to the left and right location.
  • Background – By default, the background of the sticky navigation is the white space. Here, you can change the background color or even upload a background image as you like.
  • Color Schemes – You have the freedom to change the color schemes for the navigation menu, menu item hovering background, top border, bottom border, hamburger icon and sub-menu background.
  • Font – Also, you can freely change the font size for the site title, menu items and site description.
  • Search Box – If you want, you can showcase a search button at the end of the navigation menu to expand the search form for your whole site.

Preview Your Sticky Navigation Menu

In fact, you can always get a real-time preview of your navigation bar when changing the style and the display of it. However, if you are not satisfied with the default settings, you can click the Custom CSS tab to add the CSS coding for your own style.

In addition, you can go to the Extra tab to decide the transparency level of your main navigation bar and the sub-menu items.

Navigation Transparency

Now, the sticky navigation for your WordPress site is created already.


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.