- This topic has 14 replies, 5 voices, and was last updated 5 years, 1 month ago by Tom.
-
AuthorPosts
-
June 17, 2015 at 4:05 am #115118David 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
June 17, 2015 at 4:12 am #115119David SimsJune 17, 2015 at 9:08 am #115170TomLead DeveloperLead DeveloperDo you want one of them not to show up? π
June 17, 2015 at 9:31 am #115171David SimsTom
IDK I would not say “not show up” but maybe merging them into one for that view ?
June 17, 2015 at 11:57 pm #115300TomLead DeveloperLead DeveloperPretty 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 π
June 18, 2015 at 8:48 am #115384TomLead DeveloperLead DeveloperOne 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; }
June 18, 2015 at 4:20 pm #115464David SimsTom
this is the existing theme which handles the collapsed Nav quite nicely (but has lots of other issues!)
June 19, 2015 at 1:38 pm #115628TomLead DeveloperLead DeveloperCool – 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 π
August 17, 2015 at 3:21 pm #130054JohnHi 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
August 17, 2015 at 11:48 pm #130134TomLead DeveloperLead DeveloperHi 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; } }
August 18, 2015 at 2:34 pm #130331JohnThanks, Tom! I’ll give it a try.
August 19, 2015 at 8:54 pm #130741JohnPerfect!
August 19, 2015 at 11:44 pm #130782TomLead DeveloperLead DeveloperAwesome! π
January 24, 2019 at 2:54 pm #791449DuncanHi. 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?
January 24, 2019 at 3:34 pm #791471TomLead DeveloperLead DeveloperHi 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 π
-
AuthorPosts
- You must be logged in to reply to this topic.