Menu not resizing on larger screen

[powrider686]

Hi there,
On smaller laptop, my menu isn’t resizing to a mobile view or smaller text, it is pushing the menu to a second line that makes everything look really bad. How can I keep the menu on one line until below standard laptop screen size?

See screenshot:

Thanks so much!

[jade]

Hi @powrider686,

The site container could accommodate up to 1200px in width and you have quite a lot of menu items which fills the entire width of the menu area plus the logo, that is why the menu items falls to the second line.

A workaround would be to increase the max with of the menu area by adding this CSS in X > Theme Options > CSS:

.x-topbar .x-topbar-inner,
.x-navbar .x-navbar-inner .x-container.max {
    width: 100%;
    max-width: 1400px;
}

Then you may also trigger the mobile menu earlier since by default, it will only take effect on screen width below 980px. To do that, please add this code in X > Theme Options > CSS:

@media (min-width: 1264px) {

    .x-nav-wrap.desktop {
        display: none
    }
  
    .x-nav-wrap.mobile {
        display: block
    }
  
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
  
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
  
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
  
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }

}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.