Mobile Sticky Header - Gap - part 2

Support
#1

Hi, after the last update, the gap in the mobile header came back.

I was told to add this in my child theme:

@media screen and (max-width: 979px) {
.hm12.x-bar.x-bar-fixed,
.hm7.x-bar.x-bar-top.x-bar-h.x-bar-relative.x-hide-lg.x-hide-xl.x-bar-fixed {
top: 90px !important;
}
}

and it had worked great. But now it doesn’t work on any of the pages…?

Please let me know soon.

Thanks,
Tina

#2

Hello Tina,

Thanks for asking. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS to fix the problem:

@media screen and (max-width: 979px) {
.e138-12.x-bar.x-bar-top.x-bar-h.x-bar-relative.x-hide-lg.x-hide-xl.x-bar-fixed {
    top: 90px !important;
}
}

Thanks.

#3

Thanks @Prasant. But…please take a look to see what happens.

When you scroll down, the mobile menu disappears until you reach the footer.

T

#4

Hi there,

That is not the case for me:

Please clear your mobile browser cache or check the case with another browser or Phone.

Thank you.

#5

Hi @christopher.amirian,

It works great on the homepage only. Please click on “checklists” or “supplies”…

Thanks :wink:

T

#6

Hi,

To fix it, you can add this in Theme Options > CSS

@media screen and (max-width: 979px) {
.e214-7.x-bar {
    top: 90px !important;
}
}

Hope that helps.

#7

Still not helping. Any idea?

Thanks :slight_smile:
T

#8

Hi,

Please replace code with this.


@media screen and (max-width: 979px) {
.e214-7.x-bar {
    top: 0px !important;
}
.e214-7.x-bar.x-bar-fixed {
    top: 90px !important;
}
}

Hope this helps.

#9

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