How To Create A Sticky Header In WordPress – 2 Ways

If you think creating a sticky header in WordPress is hard, then you would be wrong. You can create a sticky header using a free plugin or using CSS. I will discuss both of them, This article will show How To Create A Sticky Header In WordPress easily.

What is a Sticky Navigation Menu?

As the name suggests, A Sticky Navigation Menu is a type of menu that sticks to the top of the screen while users scroll up or down.  

There are many advantages and disadvantages of using a Sticky. Some Advantages include 1. better user experience, 2. A sticky header allows users or visitors to move around the site easily. 3. Eliminate needless scrolling.

Disadvantages include – 1. A big or large sticky header can cause a distraction for users. 2. A buggy sticky header interferes with the content and makes the experience bad for readers.

Also Read : How to Use Lottie Animation in WordPress for Free

How To Create A Sticky Header In WordPress 

Although many premium themes offer sticky headers built-in, you don’t need to buy one just to get a sticky header, I will show you two methods to create a sticky header or floating navigation menu in WordPress in minutes.

1. How to Create A Sticky Header In WordPress Using A Free Plugin 

To create a stick header using a free plugin, follow the process given below. 

First, Log in to your WordPress dashboard, then install and activate the myStickymenu plugin By Premio,

How To Create A Sticky Header In WordPress - 2 Easy Ways
How To Create A Sticky Header In WordPress - 2 Easy Ways
How To Create A Sticky Header In WordPress - 2 Easy Ways

Once the plugin is activated, You will be redirected to the myStickymenu plugin dashboard page. Now Go to “Sticky Menu Settings

 Now, Sticky Menu Settings might look confusing if you’re a beginner or non-technical person, but trust me, it is quite easy to configure.

Also Read : Best Sitemap Plugins for WordPress in 2022

How To Create A Sticky Header In WordPress - 2 Easy Ways

First, enable the Sticky menu by toggling the menu option. Now scroll down to the “Sticky Class” section.

How To Create A Sticky Menu In WordPress - 2 Easy Ways

Here, select your preferred option, here I’m selecting the Primary menu (Main Menu) as it is the easiest option. 

How To Create A Floating Menu In WordPress - 2 Easy Ways

Again scroll down and go to the “Settings“. You can leave the settings as they are or you can change them.

Read Also : How to Customize WooCommerce Product Tabs Easily 

Here, I want the menu to appear sticky only when the user scrolls 200px, Hence, I am giving the Make visible on Scroll: 200px.

Save Button

Once you are done, click on the “save” button. And your header should be sticky. 

How to use Other class or id with the myStickymenu plugin 

To use “Other class or id”, follow the step given below. 

How to use Other or id with the myStickymenu plugin

First, get the id or class of your header, And to get the id or class of the header, Press F12 or right-click on the header and then click on inspect,

 find the main div as shown, then get the class or id, for me it is an id named “main-header”. Now paste the id or class as shown. 

How to use Other or id with the myStickymenu plugin

If you’re using class, make sure to use a . (dot) and for id, you need to use #.

Learn More About ID and Class in CSS

Note: In Some cases, the plugin doesn’t work properly so, You can try other plugins or custom CSS. I will show you how to create a sticky header with custom CSS as well. 

2. How to Create A Sticky Header In WordPress Using CSS

I have tried making the header sticky using position: sticky; with quite a few themes and most of them didn’t work. Hence, I have used the position: fixed; insteadBut We will use both position properties, 1. Sticky Header Using Sticky Position Property in CSS,2. Sticky Header Using Fixed Position Property in CSS.

Get the id or class of your header by inspecting. Open your customizer and go to Additional CSS and paste the given code snippet.

1. Sticky Header Using Sticky Position Property in CSS 

Sticky Header Using Sticky Position Property in CSS 
 #yourheader-id-or-.class{ position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0;
}

Note: As maintained earlier, If positioning does not work for your theme, use the code snippet given below.

2. Sticky Header Using Fixed Position Property in CSS 

Sticky Header Using Fixed Position Property in CSS 
#main-header{
	position:fixed;
	top:0px;
	height:auto;
	width:100%;
}

Conclusion: 

Now you know how to create A Sticky Header In WordPress effortlessly. You can try out both methods and decide which works out for you.

Leave a Comment