[Resolved] Making Block Element site-header sticky

[Erika]

Hi there,

how could I make the Site Header Block Element sticky on desktop?

Erika

[David]

Hi there,

it is already sticky – isnt it ?

I see this CSS:

.stickycon {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

What am i missing ?

[Erika]

Sorry, yes. I solved this part, another problem comes from some place else. The main-navigation ist set to top:86px, that works on desktop.
Was there actually another way without setting a margin-top to main-navigation to reach that the site-header and the main-navigation were just below each other and both sticky?

For mobile:
What should I change, so the site-header and main-navigation stay sticky and not under the mobile navigation when you scroll down?

Thanks, Erika

[David]

You’re block element, you could simply change the Hook to: generate_inside_navigation this will place the element inside the nav container, and then you can just make the nav sticky.

[Erika]

Yep, that was it. Simple as usually, thank you, David.

[David]

I like simple 🙂
Glad to be of help!

[Author]

Posts