[Support request] Sticky before header block element

[Rostyslav]

Hello,

I am using a sticky navigation and I also have an Element>Block>generate_before_header.
I would like to have it also skicky when I scroll down.

Thanks

[David]

Hi there,

you can make the top bar sticky without a transition by:

1. Add this CSS to your site:

@media(min-width: 1025px) {
    .top-bar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}
@media(min-width: 1186px) {
    .sticky-enabled .main-navigation.is_stuck {
        top: 28px !important;
    }
}
@media(max-width: 1186px) and (min-width: 1025px) {
    .sticky-enabled .main-navigation.is_stuck {
        top: 50px !important;
    }
}

Note the last 2 CSS rules are to offset the sticky navigation by the height of the top bar.

2. Edit the element with your top bar, select the Container Block and in Advanced > Additional CSS Classes, add the class: top-bar

[Author]

Posts