Header Builder Sticky Bar Issue in Edge Browser


I’m having issues in the Edge browser when using the header builder on my website.

I enabled “sticky bar” and it looks fine in Chrome, but in Edge the header bar flickers and the alignment breaks when you scroll down the page.

Thanks for any advice!

Hi Graham,

Thank you for writing in, I can see the issue on Edge, but I cant replicate it on my dev site. Would you mind providing us login credentials in a secure note so we can take a closer look?

In the meantime, try setting your Bar’s height to auto and just apply a top and bottom padding on it to give the element top and bottom space.


Thanks @friech,

I tried your height suggestion and had no luck. I will leave you a secure note.

Hey Graham,

Your Bar’s Content-Length should be around 90% for this to work in Edge browser.

Hope that helps.

Thank @christian_y! This fixed the alignment in edge, but the flicker is still present.

Any ideas?

Hi Graham,

The flickering is a browser-specific issue, a workaround to make your header transition smoothly on IE/Edge is to duplicate your Bar. Turn off the sticky bar option of the original bar. Keep the sticky bar on the duplicate bar and hide it initially. You can trigger offset to 5em the sticky bar or not, either way, it will transition smoothly.

See the copy of your header I made for your reference.


Thanks for the idea @friech. This gives me something to mess around with.

You’re welcome!
We’re glad @Friech were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.