Archived topic
Max Mega Menu not visible on Mobile
5 replies · Started by jonathan on December 14, 2021
Hi folks,
I can't get the Max Mega Menu to show on mobile, although the HTML and classes are clearly in the code:
https://milltownweb.com/benagedentalcare/
I've tried disabling sticky header, adding/disabling the Mobile Header, making navigation the header, and nothing seems to work. I notice this class is being created that seemed to hide some of the NAV elements on mobile:
@media (max-width: 768px)
.main-navigation ul, .gen-sidebar-nav, .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul, .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) {
display: none;
}
Hi Jonathan,
Do you mean these menu items? https://www.screencast.com/t/Onpxd0UE1Xc
If so, they are visible to me.
Let me know if I miss anything :)
Hi Ying,
Thanks for your response!
I'm still not seeing the hamburger menu on mobile, although it's in the source. Could you check again?
https://milltownweb.com/benagedentalcare/
Thanks!!!
Jon
I think what I saw was cache, there's this CSS hides the menu toggle which added by mega menu:
https://www.screencast.com/t/jw4FTzJ7jr
Can you go to appearance > menu and chek if there's a menu assigned to the primary navigation?
Yes, it is set to primary menu. Thanks.
It seems working now, did you turn on the toggle in mega menu?
https://www.screencast.com/t/wL1cBI2hUBP
https://www.screencast.com/t/9chI7dPLkro2
If you'd like the mega menu toggle icon to be the same row as the logo, try add this CSS:
@media (max-width: 768px) {
nav#site-navigation .inside-navigation {
margin: 0;
}
.has-inline-mobile-toggle #site-navigation {
flex-basis: 0;
}
}Let me know if you need further assistance :)
