Issues with collapsed menu on mobile

Support
#1

Hello.

The collapsed “burger” menu is not “clickable” on smaller screens. Works fine on iPad and other tablets, but not on mobiles. Seems the issue is with the smaller screen sizes. It doesn’t work on the backend either when the"480px and Smaller" option is selected… please see attached.

How can I fix this?

Thanks for the help!

#2

Hi,

Your bars are overlapping and covering the mobile button on smaller screens.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#3

Thank you, I will include the requested info as a secure note. Best regards!

#4

Hello There,

I have logged in and checked your custom header. The issue is the z-index of the 1st and 2nd bar. Since the hamburger menu is in the 2nd bar with a z-index of 9998, it will be behind the 1st bar in smaller screens because it has a z-index of 9999. I would highly recommend that you add the hamburger icon or the navigation collapse element in the 1st bar instead right after your logo.

Hope this helps. Please let us know how it goes.

#5

Thank you very much RueNel.

For design reasons, we need to have the menu right under the logo (regular menu and hamburger icon)… is there any way to fix this issue without affecting the way the client wants his design?

Thanks!

#6

Hey There,

Adding the hamburger next to your logo will still be the same design layout. The only thing will change is the z-index of the hamburger icon which will now be the same as the logo and not behind it.

Hope this make sense.

#7

Thank you very much for your help, I think I got it to work. One last thing, how can I make the logo look a little bigger on mobile? It seem it “shrinks” a little too much.

Thanks for all the help!

#8

Hi @Jacko_Pinto,

Happy to hear that it got to work.

In regards to your last concern, you can add min-width to the CSS of the logo so that it will not shrink too much.

Hope it helps.

Let us know how it goes.

Thanks.

#9

Thank you Nico. Sorry, I don’t where or how to add that CSS for the logo. Tried a few things but they didn’t work :frowning:

I appreciate all your help!

#10

Hi @Jacko_Pinto,

In your Logo or image of your header, there is Customize tab section where element CSS.

Then add this in your CSS:

$el{
  min-width:150px;
}

Adjust the number according to your design.

Hope it helps.

Let us know how it goes.

Thanks.

#11

Worked great! Thank you very much for all your help. Have a great day!

1 Like
#12