Fixed topbar when scrolling

Support
#1

Hi there,

I would like to achieve a fixed topbar when scrolling, both on desktop and mobile.
I found a great thread here, which works perfectly on a desktop but not on a mobile:

This is the page I would like this to work on.

Thanks,

#2

Hello There,

Thanks for writing in!

To resolve your issue, you can apply the code from the other thread with some modifications to it. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

header.masthead {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
}

header.masthead + div {
    margin-top: 156px;
}

The 156px top margin is the actual height of your masthead. The code above will work for both desktop and mobile.

Please let us know if this works out for you.

#3

Hi there, thanks.

I’m using an iphone 7 and it doesn’t work unfortunately.

#4

Hello There,

I have tested the code in my phone and it works correctly. You maybe having caching issues. Please clear your phone’s browser cache or use private browsing mode and test your site again.

Please let us know how it goes.

#5

Thanks.

And one more thing: what would be the code if we wanted only the topbar to be fixed? Now is seems the entire header is fixed.

#6

Hello There,

CSS would be like this:

.x-topbar {
    position: fixed;
    z-index: 99999;
    left: 0;
    right: 0;
    top: 0;
}
.x-navbar-wrap {
    margin-top: 52px; /*Height of the topbar. Adjut accordingly*/
}

See this: https://screencast-o-matic.com/watch/cFi01MFJkG

Hope this helps.

#7

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