Archived topic
Mega Menu and Menu Mobile
13 replies · Started by Marga on December 19, 2016
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!!
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;
}
}
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.
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.
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!
A simple mega menu is planned :)
Try replacing your CSS with this:
.secondary-navigation {
display: none;
}
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!
Sorry, this will do it on mobile only:
@media (max-width:768px) {
.secondary-navigation,
.main-navigation li.search-item {
display: none;
}
}
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!!
I would have to see the actual site to see why the CSS isn't working I'm afraid.
Merry Christmas! :)
Sorry, I forgot to give you the url. You can checkt it on abnetsoluciones.com
Thanks!
Hmm, it looks like you don't need the mobile menu button at all?
.menu-toggle {
display: none !important;
}
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! :)
Glad I could help! :)