Disable Secondary Navigation Mobile Menu

Oh scrap that, I didn't activate the snippet! Works great!

Glad to hear that :)

I am having the same problem and as far as I can tell I have done according to the documentation and I have remembered to activate the snippet. No result at all. The menu still breaks at my given "@media (max-with: 500px)".

Website: https://bromslantgard.se

Hi there,

that documentation is for disabling the Mobile Menu on the Secondary Navigation - i am not seeing a secondary nav on your site ?

If you want the Primary Nav to never break to Mobile, then you can simply set its Mobile Menu Breakpoint to 0

I must have misunderstood what the secondary nav is, but you understood me, I was thinking about not having the primary nav break. I have tried what you say about making the breakpoint 0, but then the menu item padding for mobile device doesn’t work anymore and I don’t seem to be able to override it with css and !important.

Hi Lars,

Your primary navigation still breaks to mobile, I can't see the issue you mentioned.
Could you set the mobile break point to 0 first, then we can have a look to see if there's a CSS solution to rewrite the paddings.

Thanks!

Ying

I am sorry to be such a lazy person to not try my best to solve this on my on behalf before reaching out for your help. I think I have solved it. But I have a question that still lingers in me. The flex-box which is the menu, I want it not to break, but if overflow happens: to allow that. Is it "nowrap" which is the solution to go with here or is there a better solution?

Oh, and I also want them to stretch when in mobile view so that they regardless of how wide they are (as long as they are not wider than the viewport), they will fill the width of the mobile viewport.

Thanks for your patience with people like myself! And always, thank you for your great product and service. You are the best as far as I can tell.

You can try this CSS to remove the Wrap from the menu and reduce the menu item font size on smaller screens:

@media (max-width: 585px) {
  .main-navigation .main-nav>ul {
    flex-wrap: nowrap;
  }
  #site-navigation .inside-navigation {
    padding: 0px;
  }
  .main-navigation a {
    font-size: 12px;
  }
}

That certainly did the trick, thank you.

You're welcome