Archived topic

Sticky before header block element

1 reply · Started by Rostyslav on June 28, 2022

Viewing posts 1–2 of 2

June 28, 2022 at 2:23 am #2266630

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

June 28, 2022 at 2:49 am #2266663

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

This archived topic is closed to new replies.

Start building better websites today.