Fixed nav bar on mobile device

Support
#1

Hello,
I have set the nav bar on my website to “fixed top”. This works fine when viewing on a PC/large screen. But when viewing on a mobile device/smaller screen, when the mobile button appears in lieu of the full menu, the nav bar/mobile button becomes static and scrolls with the screen.
How do I make the nav bar/mobile button “fixed top” on small screens/mobile devices?
Thanks,
Steve

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi John,

The URL to my website is:

On the home page, there is a slider above the masthead (above the header menu). On the other pages, the header menu is at the top.
I have set the header menu to “fixed top”.
When using a PC, this works. The menu remains fixed at the top. Or on the home page, it initially scrolls up with the slider, then remains fixed at top. That is what I wanted so all working fine.

When using a mobile device however, the menu is static and scrolls with the page. I want to make this fixed at top for easier navigation.

Any tips to achieve this would be appreciated.

Regards,
Steve

#4

Hello Steve,

Thanks for writing in! It is by default that the fixed top navbar will no longer be positioned as fixed in smaller screens. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

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

#5

Hi ,

That worked perfect. Thank you very much for the support. You guys are great.

Cheers,
Steve

#6

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

#7

Hey,

i am using this custom CSS currently (thanks for this!) , but I have a little problem with it.

When you start scrolling down the navbar switches from static to fixed and causes the page to scroll down automatically by the height of the navbar. This part of the normally visible website disapears. It happens only on mobile/ small screen. It is really hard to describe, please check my website www.kewecom.de, so you can see it by yourself. You can see it very good at this page: /design-konfigurator

Thanks for any help!
Steven

#8

Hey Steven,

Thank you for reaching out to us. To fix the issue, just add the following code in the Theme Options > JS:

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!