Archived topic
Problem with mobile menu (toggle menu is placed under the logo)
1 reply · Started by Daniel Moreno Cuerda on February 8, 2021
Hi! Please help 🙂 The mobile header is giving me a problem, the logo and the toggle button are put on top of each other instead of being on the same line. I’ve tried all kinds of configurations and I can’t get it right.
Hi there,
couple of things:
1. The logo is being lazyloaded - which can affect the menu layout ( and cause CLS ). Most lazyloaders have an option to exclude images from lazyload using a CSS Class - you can use is-logo-image
2. On really small devices there isn't enough room for the Logo, cart and Toggle + Label.
You can remove the Mobile Menu Label in Customizer > Layout > Primary Navigation. Or if you just want to remove it on small devices then you can use some CSS:
@media(max-width: 360px) {
.menu-toggle .gp-icon+.mobile-menu {
display: none;
}
}