[Resolved] Customizing header – sticky

[Leonardo]

Hey guys,

I’m customizing with GB my header this way: Elements –> block –> site header. Is it possible to add a sticky effect to entire header?

[David]

Hi there,

it would require CSS. Can i see the site where this header is ?

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

[Leonardo]

Hi David,

i’m training with localwp so unfortunately I can’t share. Anyway, it’s good to know that there isn’t a direct function but it needs css instead. Are there any examples? I looked for them but couldn’t find anything. Thanks

[David]

Ok, so try this:

1. you block element, i assume it starts with a GB Container Block. Select that – and in Advanced > Additional CSS Class(es) add: sticky-header

2. Add the following CSS to your site:

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

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

[Leonardo]

It works perfectly! Thanks David

[David]

Glad to hear that

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

[Author]

Posts