Docs

[Matthieu]

Hey there,

I’m using this code to have a fixed menubar on my site :

body .x-nav-wrap.mobile.collapse.in {
  display: block;
  height: 372px;
  overflow-y: scroll;
}

body .x-navbar-fixed-top {
    position:fixed;
}

I found out that on mobile (but it may happen on my web browser as well), when I first charge the page, everything looks fine until I start to scroll. It seems to me that after that, the navbar will be above the page hence not displaying it correctly. (please have a look at the image that illustrate this phenomenon to understand it better)

Many thanks by advance for your help, I’ll send you a second message with credentials in case you’d need them to help me fix it.

[Matthieu]

This reply has been marked as private.

[Christian]

Hey there,

Please try increasing your Navbar Top Height in Appearance > Customize > Header

Thanks.

[Matthieu]

Thanks for your answer.
It seems to do the job on desktop but it doesn’t fix it on mobile…

[Joao]

Hi There,

Would you mind clarifying what is the issue on mobile.

Based on your screenshots and upon checking your website I could not notice anything out of mormal.

Please provide more information,

Thanks

Joao

[Matthieu]

Sorry about it.
What I am trying to explain is this :
1. When I first load a page on my iPhone (for example if I open a new tab), my design is loaded correctly (as you can see on the “before” screenshot, there is quite some space between the top at and the text,
2. If I start scrolling on the page (like if I go down to the footer and go up again to the header), it doesn’t go as high as it was on the first place. It does “hide” the 80 first px of my first section.(as you may see on the “after” screenshot, there is much less room between top bar and text)
I hope it clarifies…
Thanks again for your help !

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 80px;
}
}

Hope that helps.

[Matthieu]

Perfect !
Thank you for your help !

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts