[Resolved] Two menus

[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

[David Sims]

[Tom]

Do you want one of them not to show up? 🙂

[David Sims]

Tom

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

[Tom]

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 🙂

[Tom]

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;
}

[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/

[Tom]

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 🙂

[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

[Tom]

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;
      }
}

[John]

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

[John]

Perfect!

[Tom]

Awesome! 🙂

[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?

[Tom]

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 🙂

[Author]

Posts