How to Make Generatepress Sticky Header (3 Ways)

The generatepress sticky header is one of the exquisite features that help users with easy navigation. 

It is possible in just a few clicks if you are using the paid version of it. However, it is still possible in a free version with the help of an additional plugin. 

So, whether you are using a paid or free generatepress version, we will explain both. 

How to Add Generatepress Sticky Header or Menu?

The process of adding sticky navigation in generatepress is effortless, especially if you are using GP Premium. And if you are using a free version, you have to make more effort as this option is not available in it.

Without further ado, let’s explore the steps to make a generatepress sticky header or navigation. 

Use Generatepress Premium:

Firstly, log in to your WordPress dashboard, and before we head over the process, make sure your menu plus module is activated.

The “menu plus module” will be needed to make the navigation sticky.

After that, you need to select the primary navigation location. For example, whether you want to add this sticky navigation at the top of the header or below the header – it’s up to you.

Note: you can customize this setting anytime by accessing Customizer to Layout and then the sticky navigation option ( Such as Customizer > Layout > Navigation).

You can also select whether you want to turn on the sticky navigation for mobile or desktop or on both devices.

Now you must save settings. 

Additionally, if you want the header to stay on top of the screen while scrolling, you can use sticky navigation as a header. To do this, you must go to the Layout section again using Customizer and then look for the header option. Once located, click on it and check the box “use navigation as header”, and you are all done.

Using Plugin:

You may not use the GP premium and are still looking for the generatepress sticky header settings. If so, we suggest you upgrade to premium. We have been using it for a long time, and it’s completely worth it. 

However, the plugin is the alternate that you can use to make the generatepress sticky header. The one we recommend is “Sticky Menu and Sticky Header”. 

All you need is:

• Install and activate the plugin.

Following are the default ID elements of the generatepress theme that you will need to make a sticky header.

Header: #masthead (ID), .site-header (classname)

Primary Nav: #site-navigation (ID), .main-navigation (class name)

• Go back to your plugin settings and start configuring. 
• You will see the “sticky element option” under the “basic settings” tab.
• Paste the code here you copied from the developer tool or google inspect.
• That’s it, save changes.

Open your site in a new tab and scroll a bit to observe whether it’s working fine. 

Note: If you are not using Generatepress or want to confirm your header ID, here is a quick way for you as well.

6. Open your site frontend in a new Chrome browser and right-click anywhere on the site.
7. A short menu will appear where you need to inspect the option to open the dev tool.
8. Your site HTML will appear where you need to click on “header id=” site header”
9. After that, a style tab will appear below, and here you need to click on “#site header” 
10. Now copy the “#site-header” and close the developer tool.  

Additional CSS:

Another way to make a sticky header in generatepress is by using a bit of CSS. 

Don’t worry; we will also provide you with the code. However, if you are not comfortable with CSS, we suggest you stick with any of the methods mentioned above. 

1. Recall the same process that we have mentioned above to get the header ID element. 
2. Go to the appearance > customize section from your WordPress dashboard. 
3. A screen will appear where you need to scroll down and find additional CSS.
4. Simply paste the code mentioned below in the additional CSS and save the changes.

#site-header {

position: sticky;

top: 0;

}

Note: don’t forget to change the #site-header from the code mentioned above to your header element. There is no need to change if you are using a generatepress theme or try the ID mentioned above elements.

Pros and Cons of Generatepress Sticky Header:

The pros and cons of sticky navigation depend on many factors, especially on your website design or preference. 

However, here are some of the most common perks and drawbacks that we have observed by using sticky navigations.

Pros:

1. Enhanced user experience.
2. A user can visit anywhere on the site more effortlessly.
3. Reduce unnecessary scrolling.
4. Providing easy access to the desired menu.
5. Becoming a part of modern web designing or development. 
6. It is helpful to enhance brand awareness. 

Cons:

1. It will slightly impact site performance or loading time.
2. Sticky headers might not suit all site designs.
3. It may require a bit of CSS knowledge for customization.
4. It doesn’t work best on small devices.

Conclusion:

In this guide, you have learned how to get a generatepress sticky header in both free and premium versions. And we hope that this guide created some value in yours.

If so, don’t forget to subscribe to our newsletter for more exquisite posts like this.

Till Next!