How To Create a Sticky Header in WordPress

We are here to help you! Sticky headers allow you to have access to the header of your site, no matter how far down you scroll. In this article, I will show you how to create an Elementor sticky header. Do you want to Create a Sticky Header With WordPress? Well, you are in the right place. 🙂 The sticky header allows users to scroll the web page up and down, but the header remains fixed to the top and does not move. The users can easily click on the links in the navigation menu directly, they do not need to scroll up to the top of the page and then clicks on the desired link.

The sticky header made an obvious impression on users. It will stick to the top and do not move. The users can easily navigate to the site even when they scroll down. A sticky Header makes your site more attractive and pleasant looking. If you have any kind of website like portfolio site, e-commerce site, blogging site, E-learning site, and social media site, header plays an important role there. It will make your users and audience more engaging and friendly. The sticky navbar is important because you have added important links to your header, and users can easily click on the link.

So let’s get started!

We will share with you some ways that you will use to create your header sticky.

  1. Create a sticky header in Elementor
  2. Create sticky header using plugins
  3. Using additional CSS

1- Create a Sticky Header in Elementor:

If your website is created in the Elementor page builder, then you can create your header sticky with Elementor. There are some themes that build with Elementor and offer a sticky header by default. We will discuss with you how you can create your header sticky with Elementor.

Note: You will need to have Elementor Pro installed to achieve this function.

First of All, Log in to WordPress Dashboard.

Now Go to Templates >> Theme Builder.

 

Click on the Header tab and then give a good name to your header.

 


 

Right-click the header’s section handle to edit the section.

Now, Go to Advanced >> Motion effects.

 

 

Choose the Top or Bottom option from the sticky dropdown and then you are done!

 

You have successfully created a sticky header in Elementor Pro.

2- Create sticky header using plugins:

There are many plugins available that will create your header fixed to the top very easily. We will share with you some plugin that helps you create a sticky header.

1- Sticky Menu & Sticky Header

Sticky Menu & Sticky Header is a free plugin that is available at WordPress Library. You can simply “Download” and Install it on your WordPress site. You can make any element sticky by using this plugin. The element will stick to the top of your webpage. You can make many elements sticky on your site by using the WP Sticky menu plugin. If you find any problem making the element sticky, firstly, check whether the plugin is updated or not. If the problem still exists, then you can contact plugin support. This plugin has more than 100,000 active installations.

2- My Sticky Menu

My Sticky Menu is another free plugin that allows you to make your header sticky. This plugin can be used for any theme. It will make your website looks attractive and modern by adding a sticky header. By using this plugin, you can also create a welcome bar to connect with your audience. This plugin supports a multi-language feature. It is compatible with many themes and page builders like Elementor, Divi, WPBakery, Gutenberg, Visual composer, Beaver, and many more. you can use the pro version for more features. This plugin gives you support if you will face any problems.

3- Fixed And Sticky Header

Fixed And Sticky Header is used to make your header menu sticky. This plugin is also free. Just download and activate it. It has more than 4,000 active installations.

Features:
You can add a fixed header by using Id or class
This plugin will allow adding your desired Background Color
You can change the text color as well
Fixed Header when you will scroll up and down

3- Create a Sticky header using additional CSS

You can create your header menu sticky using additional CSS that will be a very simple and easy step. The best thing is you do not have to install another additional plugin to make your menu sticky. It will save your site space, time, and effort.

First of All, you have to check the menu ID that is assigned to the header navbar div. You can check the id through inspect element. Right-click on the webpage and click on inspect elements. You can see the menu ID in the picture below.

log in to the WordPress dashboard, Click on Appearance >> Customization tab.

Now Click on the “Additional CSS” tab and add the below CSS.

#site-navigation {

position:fixed;
z-index:999;
margin:0 auto;
width:100%;
top:0;
left:0;
right:0;
text-align: center;
z-index:170;
margin:0 auto;
width:100%;
}

you can also add more CSS according to your requirements and need like background color, text color, etc. If you find any problem or this code will not make your header sticky then add “!important” to each CSS property like “position:fixed !important;“. Now Check your site after adding the custom CSS.

FAQ:
How do I make a sticky header in WordPress?

You can make a sticky header by using many different ways. For example, using additional CSS, Using WordPress plugins, and using the Elementor Pro plugin. Read our article above for more information.

How do I make something sticky in WordPress?

You can make any element sticky on your site using Elementor Pro plugin if your site is created in WordPress.
You can also make your element sticky using some plugins that will allow you to make your element sticky. The plugin is a Sticky menu & sticky header.

We hope this article helped How To Create a Sticky Header in WordPress.  You can also check our article on how to install the Astra theme in WordPress.

For Installing the Woccommerce plugin, follow our step-by-step instructions on how to install woocommerce on WordPress.

Now you have good knowledge about what you can offer so read our guide about How to add custom CSS to your WordPress site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials.

 

Leave a Reply

Your email address will not be published.