[Resolved] Disable Secondary Navigation Mobile Menu

Home Forums Support [Resolved] Disable Secondary Navigation Mobile Menu

Home Forums Support Disable Secondary Navigation Mobile Menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1324510
    George

    I am trying to disable the secondary menu on mobile and keep the desktop version. I followed this article here:
    https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

    The secondary menu keeps collapsing to mobile, though. Is that article still current?

    #1324514
    George

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

    #1324823
    David
    Staff
    Customer Support

    Glad to hear that 🙂

    #1646856
    Lars

    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

    #1647100
    David
    Staff
    Customer Support

    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

    #1647283
    Lars

    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.

    #1647421
    Ying
    Staff
    Customer Support

    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!

    #1647739
    Lars

    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.

    #1647937
    David
    Staff
    Customer Support

    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;
      }
    }
    #1648251
    Lars

    That certainly did the trick, thank you.

    #1648318
    David
    Staff
    Customer Support

    You’re welcome

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.