Header element keeps disappearing?

[dgh789]

Hi, I’ve built a header which has two elements, one at the top with telephone numbers, and a second element which I use as the navigation bar. All looks fine when it loads…but when I scroll down the page the first top element (with telephone numbers) disappears? It either goes above the top of the screen, or it seems to hide behind the second element (nav bar). Any help to fix these two elements in place would be greatly appreciated. Thanks, D.

[basanta]

Hi David,

Thanks for writing in!

I believe the sticky option if off for the top bar.
Please edit the top bar and enable the sticky option to make it visible always.

Hope this is something you are looking for.

Thanks

[dgh789]

Hi, thanks for getting back to me. I checked all the bars in the header, and they are all set with the Sticky Bar ‘on’. When I scroll up and down, the first bar keeps dropping below the second. Sometime the second disappears leaving the first? Any other tips? Thanks, D.

[ruenel]

Hello @DGH789,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look and your header? To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

[dgh789]

Hi, secure note added above.

Thanks for your help. Much appreciated.

D.

[paul.r]

Hi David,

To fix it, you can add the code below in Header > CSS

.my-second-bar.x-bar-fixed {
    top:50px !important;
}

.admin-bar .my-second-bar.x-bar-fixed {
    top:82px !important;
}

Hope that helps

[dgh789]

Kaboom! Thank you. That worked a treat

Have a great day.

Best,
D.

[christian]

Hey D,

Though that code solves the issue, the true reason why that happened is because you’ve set the bars’ Sticky > Shrink Amount to 0. It should be set to 1 or lower but not 0 for your case.

I would not recommend using the custom CSS solution because you don’t need that to make the sticky bars stack on top of each other. Pro has a built-in feature that intelligently calculates the sticky bars’ position based on the configuration of the bars in your header. If in the future you change your top bar’s height, you’ll find that the second bar will cover a part of your top bar.

If you’re interested to know the correct solution, please watch the screencast in the secure note.

Thanks.