Home Forums Weaver Xtreme Theme Mobile menu not clickable and centered logo Reply To: Mobile menu not clickable and centered logo

#70437
scrambler
Moderator

The problem is that the way you customized your logo on the menu bar by positioning it absolute is not responsive.

It starts messing things up way before the mobile menu. If you reduce your browser width until the menu items occupy the whole width, they too will be behind it and unaccessible, and if you reduce it further, the logo will completely hide the ones on the second line.

You can fix the Mobile menu issue by making your current rules restricted to desktop adding the .is-desktop class to it, and reduce the image a bit on mobile with the second rule below

.is-desktop .menu-primary .custom-logo-on-menu {position:absolute;top:0px;left:-50px;}

.is-mobile .menu-primary .custom-logo-on-menu img {height:5em;margin-top:-10px}

But more importantly you should rethink making the logo float above the menu bar

One way would be to replace you rule by the ones below. These would allow the menu to stay on the right of the logo even when on two lines, so that it would never hide anything

.is-menu-desktop .wvrx-center-menu {display:block;}
.is-desktop .menu-primary .custom-logo-on-menu {margin-bottom:-100px;}
.is-mobile .menu-primary .custom-logo-on-menu img {height:5em;margin-top:-10px}