Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] How to make custom top bar sticky with header

Home Forums Support How to make custom top bar sticky with header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1540475
    Damir

    Hi,

    I have created custom top bar that’s added above the header with elements (generate_before_header). I have turned on option to use menu as header so I can activate sticky menu. Everything works great except when I scroll down only that navigation stick to top without my custom top bar… Any easy solution to include my custom top bar to sticky container?

    Thanks!

    #1540570
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1540743
    Damir

    Hi, URL is attached. So I would like to have that custom purple top bar sticky together with header. On this way when you scroll down only header is sticky without top bar.

    #1541206
    David
    Staff
    Customer Support

    Hi there,

    as you have no transition on the Sticky Navigation, you can disable that GP feature and use some CSS like so:

    .top-bar,
    #site-navigation {
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
    }
    .top-bar {
        top: 0;
    }
    #1541211
    Damir

    Hi David,

    thanks! But now header is now sliding under top bar.. take a look at link in the private info.

    #1541221
    David
    Staff
    Customer Support

    Can you disable the Sticky Navigation option in Customizer > Layout > Sticky Navigation. Its not required with the CSS I provided

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