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

[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!

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

[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.

[David]

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;
}

[Damir]

Hi David,

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

[David]

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

[Author]

Posts