Archived topic

How to make custom top bar sticky with header

5 replies · Started by Damir on November 21, 2020

Viewing posts 1–6 of 6

November 21, 2020 at 2:34 pm #1540475

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!

November 21, 2020 at 7:17 pm #1540570

Hi there,

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

You can use the private information field.

Let me know :)

November 22, 2020 at 1:19 am #1540743

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.

November 22, 2020 at 7:38 am #1541206

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

November 22, 2020 at 7:42 am #1541211

Hi David,

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

November 22, 2020 at 7:51 am #1541221

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

This archived topic is closed to new replies.

Start building better websites today.