[Resolved] Menu Item Width (mobile setting) is ignored

Home Forums Support Menu Item Width (mobile setting) is ignored

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1266602
    Richard

    Hi,

    Iā€™m setting up GPP (using Niche) with WooCommerce.

    I want to have the Primary Navigation, when viewed on mobile, show the desktop style menu (words always visible) rather than the mobile style menu (button to reveal menu). I realise there’s not much room on mobile but I only have a small number of menu items. To force the standard menu on mobile, I did this:

    Customize – Layout – Primary Navigation
    Mobile Menu Breakpoint: 0

    On desktop I’d like:
    Menu Item Width: 40
    to give some generous space.

    On mobile I’d like:
    Menu Item Width: 20
    so it will fit and not drop down a line.

    And I understand I can set these separately by toggling between the desktop and mobile buttons placed right above that setting.

    The settings seem to successfully “stick”. In other words, after hitting publish, I can come back later and and toggle between the two and see 40 and 20 respectively.

    But, the settings for mobile are ignored.

    The mobile view only behaves according to the desktop setting! So if the desktop setting for width is 40, the mobile view uses that and I get the ugly spill over to the next line. If the desktop setting for width is 20, the mobile view uses that and looks good.

    But I don’t want to use 20 for the desktop setting. They are supposed to be independently adjustable.

    Can anyone tell me what I might be doing wrong?

    Thanks,
    Richard

    #1266880
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That’s happening because the media query is now not triggering due to the mobile menu breakpoint option.

    Try this CSS:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
            padding: 0 20px;
        }
    }

    Let me know šŸ™‚

    #1267015
    Richard

    Hi Tom,
    It worked well.
    Thanks!

    #1267728
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.