Menu bar not fixed on mobile

Support
#1

Hi,

I’ve searched various threads on this issue but still have not found a solution that works for me – my menu bar is fixed on my desktop, but not on the mobile version of my site.

Here is the link to the site – http://paintbrushtravel.com/

Please advise, thank you!

Julie

#2

Hello Julie,

Thanks for writing in! By default, the mobile menu is not fixed on smaller screens. If you also want that fixed, to resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

Hope this helps. Please let us know how it goes.

#3

Hi,

Thanks for the response, I tried inputting the code, and the mobile menu is still not fixed.

There’s a chance that I may be somehow inputting the code incorrectly – I don’t have much experience with custom CSS.

Can you please advise?

Thank you,

Julie

#4

Hi @jjohnso20,

Thanks for the update. In this case, to check if you have added the right code in the right place, share us your admin credentials so we could check your setup further.

Don’t forget to add it in secure note.

Thanks.

#5

Hi Nico, I sent the admin info in a secure note – can you confirm that you received it?

Thanks,

Julie

#6

Hi Julie,

The code that @RueNel provided should work. I tried checking your Global CSS and the CSS codes that are in there are a bit messy and there might be some CSS errors that is why the code is not working.

Please go to this site: http://csslint.net/ then copy and paste all the codes from the Global CSS. You should then be able to see some result and messages if there are any CSS error you should fix.

Hope this helps.

#7

Got it, thank you!

I actually deleted all the existing custom CSS code, and then pasting in the code that you sent (so this is the only custom CSS currently) and it still doesn’t seem to be working.

Any further advice is greatly appreciated!

Julie

#8

Hi Julie,

Thanks reporting back.

Please try this code instead:

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

Hope this helps.

#9

It worked, thank you!

#10

You are most welcome!

#11

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