Sticky header gap when scrolling down mobile

Support
#1

Hi!
I am working on a site an I created a separate menu that only shows on mobile, only problem I have is that I want to remove the gap that appears over the mobile navigation bar when scrolling down the page. It looks fine when your at the top of the page but when you scroll down it seems to lock itself with a gap over the top, I want it to just be at the top of the screen. The site is https://sheriffboblindsey.com.

Here´s a screen shots of the gap. How can I fit this?

#2

Hi,

Thanks for writing in!

To fix it, you can add this in Header > CSS

@media(max-width:979px) {
.hm15.x-bar.x-bar-fixed {
    top:0 !important;
}
}

Hope that helps.

#3

That didn’t´ work. There´s still a gap…

#4

Hi There,

Please clean your browser cache and test it again.

I have tested on a re-sized desktop computer and Android mobile and it works well.

Thank you

#5

Okay! Great yes! Now it´s working. thank you!

#6

You are most welcome. :slight_smile:

#7

Sorry… I know why it didn’t work, it works on the front page but not on the subpages which has a a copy of the main header only without the top menu. It´s not working on any of the sub pages.
Is there a different code there?

#8

Hi,

For subpages, you can add this in Subpages Header > CSS

@media(max-width:979px) {
.hm6.x-bar.x-bar-fixed {
      top:0 !important;
}
}

Hope that helps

#9

great yes! Thank you :slight_smile:

#10

You are welcome :slight_smile:

#11

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