Sticky Header bug

MartinL-CZ · December 2022

Hi, the sticky header doesn't work properly if I choose the Transparent style. After the first loading of the page, everything is OK, but if I use reload when I'm in the middle of the viewport hight, then I go back to the top, the header (not sticky) is 60px lower. The error appears in Chrome, FF, Opera and Edge browsers (on Mac). Header style Classic or Plain work correctly.

Site: https://test24.webidea.cz

Thank you,

Martin

Phil · December 2022

Hi,

Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS:

#Top_bar:not(.is-sticky){
 top: 0!important;
}

Thanks

MartinL-CZ · December 2022

Thanks, however this edit causes the menu to overlap the action bar.

Phil · December 2022

I do not see an action bar on your website.

Can you attach a screenshot showing what you refer to, please?

Thanks

MartinL-CZ · December 2022

Hi Phil, the action bar is active now:

https://test24.webidea.cz/

The phone number can be seen under the logo. It is logical because both elements are positioned at the top.

I think I'll end up using the Classic header where everything works fine.

Phil · December 2022

So change the top value in that CSS from 0 to 60px.

#Top_bar:not(.is-sticky){top: 60px!important;}

Thanks

Sticky Header bug

Comments