Mobile Sticky Header - Gap

Support
#1

Hi,

Just checking in to see if there’s a fix to the mobile sticky header :slight_smile:

Post from December (question #2):

Site:

Please let me know soon if there’s a fix for this as we’re launching near the end of this month.

Thanks!
T

#2

Hi there,

Thanks for writing around! For a quick fix you can add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

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

Let us know how this goes!

#3

@Nabeel - You’re the BEST!! :sparkles:

RESOLVED! Thank you so much!

T
ps- I threw it right into styles.css (child)

1 Like
#4

Glad we could help.

Cheers!

#5

Sorry @Nabeel, looks like we’re not out of the woods just yet. The snippet only worked on the homepage. I have a main header for the homepage, and a separate header designed for all the other pages.
Is there something else we can add to the CSS to remove the gap on the other pages as well?

You can see the gap is still happening here:

Thanks again!
T

#6

Hello There,

Please update the css and use this:

@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;
    }
}

Please let us know if this works out for you.

1 Like
#7

That does the trick for now. You’re awesome. Thank you @RueNel!

#8

You are most welcome. :slight_smile:

#9

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