[Support request] Best way to have sticky/fixed header

[Fabien]

Hi,

What is the best way to have my header behaving as a sticky / fixed header ?

Thanks

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

the simplest way is to use the nav as a header then you can use the sticky nav:

https://docs.generatepress.com/article/navigation-as-a-header/

Note: this method will be a one click option in the next release of GP Premium 1.8 – its currently in alpha for public testing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabien]

Thanks, works like a charm. However, my logo is now super big, how can I fix the width ?

Fabien

[Leo]

Looks like you’ve fixed this?

I see a normal size logo:
https://www.screencast.com/t/OYgAlmwk2

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabien]

It is too big for me, I’d like to make is smaller…

[David]

The logo size is based upon the Menu Item height in the Customizer > Layout > Primary Navigation or Sticky Navigation.

If you don’t want to reduce that height then you can increase the padding around the image with CSS:

.main-navigation .navigation-logo img {
    padding: 15px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabien]

Thanks David !

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts