How to create a Fixed Header Menu in Wordpress

How to create a Fixed Header Menu in WordPress

Want to make your wordpress blog more easy to navigate?

A fix header makes your blog much easier to navigate. Its easier for a user to choose to navigate to different page or post from where he is without moving to top of the page and then selecting the menu options. If you are a blogger, i would suggest you to have a fix header as you might have some lengthy posts which on desktop may look scrollable but on a mobile phone, its a lot to scroll.

In this article, I will explain you how to fix the header menu of your wordpress blog in three easy steps.

Also interested in sticky sidebar?

Enter your Email Id here to receive the tutorial on how to configure a Sticky Sidebar Widget directly in your mailbox as soon as it is published. 🙂

#1 Install Plugin 

You need to Install and Activate “Fixed and Sticky Header” Plugin created by Arjun Thakur.

#2 Open Plugin Settings

Once you have activated the plugin , From your Admin Dashboard, Move to Settings -> Fixed Header.

A screen like this will appear:

#3 Getting Header Class

Now you can see in the above screenshot, this plugin requires you to pass a Class name of the header menu. To get the class name of your header menu, follow the following steps:

a) Open your blog in New Tab

b) Right click anywhere on your blog and Select Inspect Element

Note: I am using Safari so the options might vary, but every browser has an Inspect Element option.

c) After Selecting Inspect Element, a new window will appear in the  bottom of your page.

d) Now, If you are using Safari, select the Element Selection button that is present in left side of the search box.

If you are Using Google Chrome or any other browser, You can find this option in top left corner of the window.

e) Once selected, its colour will change to blue.

f) Now move your cursor to the menu such that the colour of menu changes to blue indicating that full menu has been wrapped. Don’t move your cursor. See below image for example:

g) Now notice the yellow box that has appeared in the left just below the menu.

h) This yellow box tells you the class name of the wrapped box. In my case it is: nav.menu-wrap 

i) This is the class name of your menu. Copy it.

#4 Configuring Plugin

Now that you have got the class name, paste it into the class name field in the Fixed Header Plugin Settings.

Click on Save Settings and you are all done. 🙂

Now reload your blog page or open your blog in New Tab and you can see a sticky header bar 🙂 Also see the mobile version of your blog.

Also interested in sticky sidebar?  A sticky sidebar would make your blog look more beautiful. See how I am using Sticky Sidebar to show related posts to my readers whenever they are reading a post.

Enter your Email Id here to receive the tutorial on how to configure a Sticky Sidebar Widget directly in your mailbox as soon as it is published. 🙂

Do let me know in comments if you found this post helpful 🙂 Also if you have any query related to this or you are not able to setup this plugin, let me know in comments and i will try to help.

You can also ask your question here : Ask a Question

Namaste! 🙂

Also Read:

150+ Ping list for WordPress to get Posts Indexed on google much faster

How to get your visitors write for your blog?

Top 10 List of Websites to submit your blog to improve Google ranking

Google Adsense Alternatives to show Advertisement on Your Blog

10 Free Plugins that every wordpress blogger must have

 

Leave a Comment

Your email address will not be published. Required fields are marked *