Archived topic
Switch off 3rd party main menu on mobile
9 replies · Started by Michael on May 16, 2021
Kind of going round in circles here, I'm just wanting to switch off a 3rd party main menu plug, and have Generatepress display a nice compact menu for those using mobile devices, without having to install another plugin to do this.
I know I've seen the solution somewhere, but can't seem to find it in the knowledgebase or in the forum.
Trouble is I can never get my head around this 768 breakpoint thing.
Any help at all would be greatly appreciated.. the css for the current desktop menu is .main-navigation
Hi there,
can you share a link to the site where we can see the issue?
Hi David, it's not live yet, but I'll attach a login so you can see.
Please note, when I activated the 3rd party plugin, on mobile the generatepress hamburger icon was showing so I hid that with CSS.
Anyway, if you could take a look that would be great.
Hmmm... what menu plugin are you using ?
Am using this one David..
Hmmm.... how about this:
1. Enable the Customizer > Layout > Off Canvas Panel for mobile only.
2. Enable the Mobile Header in Customizer > Layout > Header.
3. The menu you have created and located on Primary Navigation, edit that and also include the Off Canvas Panel in its locations.
Remove any CSS you have added to hide stuff... then let us know, and ill take a look if we now have all the elements we need for displaying a GP nav on mobile.
Hi David
That's excellent, just need to remove the menu for the 3rd party on mobile view now.
I tried this and it seems to work, but not sure about 640px ? Should it be 768px?
@media (max-width:640px){
/* Primary */
#primary{
display:none;
}
}Scrub that, it gets rid of the menu and the contents lol... :) I'll try some other selectors
Try this CSS:
@media (max-width: 768px) {
body #primary.mega_main_menu.primary {
display: none !important;
}
}Thanks Leo !
Perfect.. thanks David also..
No problem :)
