Mobile Navbar Fixed Top Issue

[richak]

Hi!
I am trying to make my mobile navbar fixed at the top, and I followed the rules laid out here: https://theme.co/apex/forums/topic/header-navbar-position-fixed-top-also-on-mobile/

However, the fixed position isn’t causing mobile navbar to stick to the top. I see the class x-navbar-fixed-top gets added once i scroll down, but it doesn’t set the navbar on smaller screens.

Can you let me know what’s going on? Thanks

[ruenel]

Hello @riakhmerov,

Thanks for writing in!

Usually this custom css should make the navbar be in fixed top position:

@media(max-width: 979px){
  .x-navbar.x-navbar-fixed-top {
    position: fixed;
  }
}

If this does not help, please provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[richak]

Hey Rue, that still didn’t seem to work. I’ll attach the login details to this reply.

[ruenel]

Hello @riakhmerov,

As it turns out that you have heavily modified your navbar which is why the code did not work. To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .masthead.masthead-stacked {
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    .masthead.masthead-stacked+div {
        margin-top: 140px;
    }
}

Please let us know how it goes.

[richak]

that worked great, thank you!

[friech]

We are delighted to assist you with this.

Cheers!