Header Builder Sticky Bar Issue in Edge Browser

[DiceDandy]

Hi,

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!

[friech]

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?

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

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.

Cheers!

[DiceDandy]

Thanks @friech,

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

[christian]

Hey Graham,

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

Hope that helps.

[DiceDandy]

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

Any ideas?

[friech]

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.

Cheers!

[DiceDandy]

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

[ruenel]

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