Simple Mega Menu on Mobile with submenus

[Mark]

I used the instructions at https://docs.generatepress.com/article/building-simple-mega-menu/ to create a mega menu with several parent and child menus, and numerous grandchild items.

I then used David’s CSS to hide the child menu titles / headers as in:
https://generatepress.com/forums/topic/gp-mega-menu-hide-column-headers/

But problem!

In the mobile off canvas menu, the child item headers still show up, even when I comment out the conditional CSS restriction that keeps David’s CSS from operating on mobiles, i.e. /* @media (min-width: 769px) { */

Solution? Another menu for mobile use only? Any easy way of copying the existing (large) primary menu without using a plugin?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Thanks Leo, site attached. Ignore the SSL problems, this site just went live 20 minutes ago and there are some teething problems

[Mark]

Bugs fixed, you should be able to see the behavior of the ‘simple mega menu’ on mobile now.

[Leo]

Instead of using CSS, what if you create a new menu specific for the mobile and assign it to the off canvas navigation?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#create-a%C2%A0new-menu
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Yep, I used the ‘duplicate menu’ plugin to make it easy. Thanks

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts