• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WPSyed

  • WPSyed
  • Best Deals
  • Blog

How To Make Sticky Header in GeneratePress Theme

June 30, 2021 by Charlie Patel

GeneratePress Sticky header

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

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

A sticky header is a common design element in WordPress themes. It typically remains fixed to the top of the screen while scrolling, and it may or may not be transparent depending on what design you like best.

Head over to Layout>and Click on Sticky Navigation Option

layout>sticky navigation generatepress
layout>sticky navigation generatepress

After that, you have to turn on the sticky navigation. If you want to turn it on for mobile or desktop.

 GeneratePress sticky navigation
GeneratePress sticky navigation

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 the 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 here.

Filed Under: Themes Tagged With: Sticky Header in GeneratePress, sticky navigation

Syed Saadullah

View My Blog Posts

Primary Sidebar

Footer

Read My Blog
  • RSS
  • Privacy Policy
  • Disclosure
  • Sitemaps

Deals & Discount

→ Get Kinsta Hosting
→ Cloudways 25% Discount
→ Get Perfmatters
→ Get GenerateBlocks

Click to Copy