[Support request] Sticky before header block element

Home Forums Support [Support request] Sticky before header block element

Home Forums Support Sticky before header block element

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2266630
    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

    #2266663
    David
    Staff
    Customer Support

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.