Hi all.
I’ve used a Beaver Builder template to create a website. I don’t like how the default menu looks and works in tablet and mobile view, so I installed the Responsive Menu plugin, which looks and works much better.
However, in tablet and mobile view, both the default menu icon (the three blue lines) and the plugin menu icon are shown. Depending on the size of the tablet or mobile device, the default menu can be triggered if the user clicks in the wrong area, which is not what I want.
So how can I hide the default menu icon in mobile and tablet view? I’ve gone through the settings and can’t find the solution. The thing is, I had previously tried another mobile menu plugin, and that plugin must have somehow suppressed the default menu from showing in tablet and mobile view, because only the plugin menu icon could be seen.
Thanks in advance.
https://preview.redd.it/lr9uqmek689d1.png?width=267&format=png&auto=webp&s=bc0c230165a376093b9243bcc0b8238c22ab3fa3
EDIT: I managed to “fix” the issue by choosing a different plugin menu icon which was bigger, and after some slight repositioning, could completely cover the default menu icon.
[New icon, repositioned to hide default icon](https://preview.redd.it/a3s6rzmdh89d1.png?width=172&format=png&auto=webp&s=0639bd133c4fc9b2a383db636688540a4e2088c1) [ad_2]
I couldn’t be certain without a closer look but in general if you go to the Advanced tab on the Menu module you should be able to click the “breakpoint” icons to set which (overall) screen sizes you want to hide or show the module on.
https://docs.wpbeaverbuilder.com/assets/images/advanced-tab–visibility–1-a0dc1cdc6d3ab01e1b5f021715433aa9.jpg
I found this webpage which show how to use CSS to hide the default menu icon:
https://www.wpbeginner.com/wp-tutorials/how-to-hide-a-mobile-menu-in-wordpress-beginners-guide/#:~:text=In%20the%20menu%20item%20settings,want%20to%20hide%20on%20mobile.
But for some strange reason, I can only use CSS to hide the plugin menu icon (if I used its class), not the default menu icon. Using the class of the default menu icon does not hide the icon. So weird.
.ast-mobile-svg ast-close-svg {
display:none;
}