Sticky Headers for Desktop and Mobile not playing nicely

Support
#1

I have a sticky header for desktop (6em height with logo and nav) and then I have that disappear and put in a different sticky header for mobile (60px and logo). Nothing fancy about either.

If I’m on mobile, the mobile header is placed at the top of the page… until I scroll down. At that point, the header jumps down the page and appears to stick to the bottom of the invisible desktop header and stays stuck there as I scroll down the page.

#2

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#3

Login details in secure note. Thx

#4

This is a known issue. For now, you can give an ID to your mobile header then give it a top position property of 0.

Tested that on my end and it works. https://youtu.be/EP-J7rN9zNA

An official solution to this might be available soon. Please stay tuned.

Thanks.

Sticky Headers Broken for 4 Months Now
#5

Thanks… any suggestions for preventing the header from disappearing when you first scroll down (it does come back and stick). My client will definitely hate it. :slight_smile:

#6

Hi,

Try to change the css code to this.

#custom-header-mobile {
    position:fixed !important;
    top:0 !important;
}

Hope that helps

#7

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