Sticky Header bug

MartinL-CZ

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

Hi,

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

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MartinL-CZ

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

Phil

I do not see an action bar on your website.

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MartinL-CZ

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

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

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next