Stop navbar items from appearing on a second line

[KimAnn]

Hello:

on this site, if you reduce the screen size eventually the nav bar items will go onto a second line. Is there anyway to stop this from happening? Either the navbar gets smaller as the screen size reduces or it goes directly into mobile view?

https://alisonljames.com/

Attaching login info…

[nabeel]

Hi Kim,

Thank you for reaching out to us. You can enable the mobile navigation before the navigation items drops to the next line. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. Try adding the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) and (max-width: 1260px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

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

[KimAnn]

Again, I’m suprised. Been putting in queries like this for 4+ years with you guys why am I now being told this is outside your scope? I will try the code and of course I know you aren’t going to implement it.

[christian]

Hey Kim,

Custom development is really outside the scope of our support ever since. Please see our Terms.

We have received numerous header customizations in the past and providing custom code each time is not manageable that is why Pro was born.

Please switch to Pro for this project as this will not need custom code in Pro.

I hope you’ll understand our side also.

Thanks.