[Resolved] Two menus

Home Forums Support [Resolved] Two menus

Home Forums Support Two menus

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #115118
    David Sims

    Converting a site to GP with GP Premium

    Have Primary and secondary nav

    When the site collapses to show the “hamburger” and menu text (Never change that!) 2 menus are on screen

    Local dev site http://dmsims.mooo.com

    #115119
    David Sims

    Two menus

    #115170
    Tom
    Lead Developer
    Lead Developer

    Do you want one of them not to show up? πŸ™‚

    #115171
    David Sims

    Tom

    IDK I would not say “not show up” but maybe merging them into one for that view ?

    #115300
    Tom
    Lead Developer
    Lead Developer

    Pretty tough to merge them into one unfortunatley.

    Would be a good option to allow for a custom menu to be set for the mobile nav – will have to look into it.

    Let me see if I can think of something – I’ll update you πŸ™‚

    #115384
    Tom
    Lead Developer
    Lead Developer

    One temporary option would be to add all of the menu items into the primary navigation.

    Then in “Appearance > Menus”, click “Screen Options” at the top right. In that section, select the “CSS Classes” checkbox.

    Now open the menu items that shouldn’t display on the desktop version of the main menu, and add a class to them, for example: hide-on-desktop

    Then on mobile, hide the secondary navigation (because those items will now show up in the main nav on mobile)

    @media (max-width: 767px) {
          .secondary-navigation {
                display: none;
          }
    }

    If the items don’t hide on desktop automatically with that class, then add this CSS:

    .hide-on-desktop {
          display: none;
    }
    
    @media (max-width: 767px) {
          display: block;
    }
    #115464
    David Sims

    Tom

    this is the existing theme which handles the collapsed Nav quite nicely (but has lots of other issues!)

    http://theretailer.getbowtied.com/demo/

    #115628
    Tom
    Lead Developer
    Lead Developer

    Cool – I’ll definitely see if there’s any way I can make it so a separate menu can be shown for mobile.

    For now, my workaround above should work nicely though πŸ™‚

    #130054
    John

    Hi Tom,

    Following this thread about having a single menu and “hamburger” icon that displays both the primary and secondary navigation menus on mobile, rather than 2 hamburgers, one above the other (this seems “clunky” having to toggle back and forth between 2 menus). Is there any updated solution for this other than by adding a CSS class to the primary navigation?

    Thanks!

    John

    #130134
    Tom
    Lead Developer
    Lead Developer

    Hi John,

    Not fully..

    You could use our Menu Plus add-on. Create a new menu with all of the items merged, and then set it as your slideout menu.

    Go to “Customize > Menu Plus” and enable the slideout menu on mobile.

    Then go to “Appearance > Menus” and create the new menu – then set the theme location to “Slideout Menu”.

    Then you can hide the secondary navigation completely:

    @media (max-width: 768px) {
          .secondary-navigation {
                display: none;
          }
    }
    #130331
    John

    Thanks, Tom! I’ll give it a try.

    #130741
    John

    Perfect!

    #130782
    Tom
    Lead Developer
    Lead Developer

    Awesome! πŸ™‚

    #791449
    Duncan

    Hi. How can I make that my secondary menu will be displayed when a hamburger menu that can be found along with my primary menu is clicked?

    #791471
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not too sure what you mean? Any chance you can open a new topic with the URL to your site and a link to an example?

    Let me know πŸ™‚

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