[Support request] Mega Menu and Menu Mobile

[Marga]

Hi,

I’m using Mega Menu Plugin in Generate Press, which works fine in desktop version. However, in mobile version there are too many menus. The top menu (called ABnet Soluciones) I think is taken from the default Generate Press, but I don’t want it to be shown in tablet or mobile version. Also, there are two searchs.

https://s23.postimg.org/5222goimj/Menu.png

How can I manage this?

Thank you!!

[Tom]

Which menu there do you want to keep? The middle one?

Try this:

@media (max-width: 768px) {
    .main-navigation .menu-toggle,
    .mobile-header-navigation,
    .secondary-navigation .menu-toggle {
        display: none !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Thank you Tom,

I would like to keep just the main menu (Inicio, Nosotros, Qué hacemos…). If I put that code the top menu is the only one that remains in the mobile version.

https://s30.postimg.org/j6t3zs3r5/Menu2.png

[Tom]

So you want the standard GP menu on mobile, and the mega menu plugin on desktop?

I would need to see your site to know what the selector for the mega menu mobile button is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Yes, I would like the mega menu plugin on desktop. On mobile, I want just a standard main menu, I don’t mind which one.

Actually, the only reason I’m using the mega menu on desktop is beacuse I need to show the submenu in two columns with icons. It would be great if this could be done with the GP menu, maybe you plan it as improvement in the future?

The web is abnetsoluciones.com

Thanks!

[Tom]

A simple mega menu is planned 🙂

Try replacing your CSS with this:

.secondary-navigation {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Yuhu! I hope the mega menu GP will work soon!

With that CSS the secondary menu dissapears, but I want this only on mobile menu. On desktop all menus are fine.

The problem also is on mobile I still see two searchs icons, and If I click on Menu to xpand/contract ir nothing happens.

Many thanks!

[Tom]

Sorry, this will do it on mobile only:

@media (max-width:768px) {
    .secondary-navigation,
    .main-navigation li.search-item {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Thanks Tom, finally the nav search doesn’t appear! But still there is the MENU toggle on tablet and mobile.

I tried with this code to get it out on tablet and mobile, but didn’t work:

@media (max-width:768px) {
.main navigation,
.mobile-header-navigation .menu-toggle {
display: none;
}
}

https://s28.postimg.org/4jrg1d3jx/Menu3.png

Many thanks and Merry Christmas!!

[Tom]

I would have to see the actual site to see why the CSS isn’t working I’m afraid.

Merry Christmas! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Sorry, I forgot to give you the url. You can checkt it on abnetsoluciones.com

Thanks!

[Tom]

Hmm, it looks like you don’t need the mobile menu button at all?

.menu-toggle {
    display: none !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marga]

Perfect! now the mobile/tablet menu button is hidden. Thank you very much Tom!

I hope a mega menu generate press will be working soon! 🙂

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts