How To Make Sticky Header in GeneratePress Theme

If you have just purchased the GeneratePress premium theme then you must want to make a Sticky header in .

To Enable GeneratePress sticky header just go to your WordPress Customizer and Follow all these steps one by one.

Head over to Layout>

GeneratePress layout
generatepress lightweight theme

Turn on the sticky navigation for specific Device. And after enabling this just publish your changes and scroll down.

If you want to remove the  padding around the logo on mobile:

.mobile-header-navigation .mobile-header-logo img {
    padding: 2px;
}

For Navigation Only

If you want the standard Site Header to be Sticky then this CSS will do the trick:

.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

GeneratePress Sticky Header

Now after enabling this sticky header in generatepress you will be able to scroll the header along with content.

You can also use your navigation as a header and make it sticky with your website logo. To do so simply go to the Layout section again and find the header option.

Use Naviagation as a Header in GeneratePress

Check this box and simply select your logo for mobile or desktop both versions if you want too.

Now you can use this feature generatepress sticky header on your website. If this guide helped you then please feel free to ask anything in comment down below. I will be happy to help you.

If you are still unable to do anything with GeneratePress sticky header then please visit gp docs .

Syed Saadullah

I am Saad. The person behind EagleTuts. I craft actionable advice about WordPress, security, speed and performance. Feel free to ask an

Leave a Comment