Docs

[Rifft]

Hello guys,

I met a problem with my navbar and the top of the body on mobile and tablet.
You’ll find my credentials in the next post.

Go to the home page on mobile and look at the top-alignment of the first picture.
Now, scroll down a little bit and go back to the top of the page. The picture moved behind the logo.

I met the same problem on all pages, only on mobile and tablet.

Thanks for your help.

[Rifft]

This reply has been marked as private.

[Paul R]

Hi,

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

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() <= 0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
        }
    });
});

Hope that helps.

[Rifft]

Hello Paul R,

Thanks for your code, it’s working great.
However, there is a “jump” when you scroll up or down.

Do you think there is another solution with something smoother ?

This is better than before anyway so thanks again !

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 63px;
}

Hope that helps.

[Rifft]

Hello Paul,

It’s working, it’s perfect on mobile and tablet.
However, it creates a space on the desktop version, on all pages (see screen).

Is there a way to implement this code only on mobile and tablet ?

Thanks

[Jade]

Hi there,

Please try to update the code to:

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

[Rifft]

Hello,

It’s working perfectly, thanks a lot !

[Christopher]

You’re welcome.

[Author]

Posts