Mobile Sticky Header - Gap - part 3

Support
#1

The gap still isn’t closing on desktops.

What @paul.r posted in “Mobile Sticky Header - Gap - part 2” helped perfectly after you begin to scroll, but as soon as you land on the page, there’s a gap. And now the gap is larger, too.

BUT it works perfectly on my phone!!! So please keep the phone / mobile code. I just need something to fix the gap on a desktop please :slight_smile:

Thanks,
T

#2

Hi there,

Thanks for writing around! Can you please try adding the following CSS code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    .e214-1.x-bar, .e214-1.x-bar-space {
        top: 0 !important;
        min-height: 90px !important;
    }
    .e214-4.x-bar {
        top: 0px !important;
    }
    .e214-4.x-bar-fixed {
        top: 90px !important;
    }
}

Let us know how this goes!

#4

Thanks @Nabeel, however, your code still gives me the gap in both mobile and browser. I’ve gone back to Paul’s. I think my browser cache was messing with me because it seems to be fine now.

This seems to work:

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

Thanks @Nabeel and @paul.r! :relaxed:

T

#5

Glad to hear it!

#6

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