Mobile Menu Broke

[nonprofitdev]

Can you help with this? I’m not sure what happened, but the mobile menu broke on this site.

[Prasant]

Hello @w3developing,

Thanks for asking. Hope you’re having a great day.

As you have not shared the website URL, it’s difficult for me to take a closer look. But looking at the screenshot I think you are referring the to the gap that’s there top. In that regards, please take a look at the following thread and use the solution mentioned up there:

Pro mobile menu gap at top

Let us know how it goes.

Thanks.

[nonprofitdev]

Sorry about that. Here is the info. Doesn’t seem to be working. Could you take a look?

[nabeel]

Hi again,

I see you’re having this issue due to a custom CSS you’ve in your Child Theme’s style.css file, please find this line of code (line # 763):

header.x-masthead { position: fixed; top: 105px; z-index: 9; width: 100%;}

And replace it with:

header.x-masthead {position: fixed;top: 0;z-index: 9;width: 100%;background: #fff;}

Hope this helps!

[nonprofitdev]

Sorry not quite. I found a picture of how it used to look though.

Right now it looks like this:

But, I’m trying to get it back to:

[paul.r]

Hi,

What you are trying to achieve will require lots of custom css.

What you can do is add another three bars to your existing Header then arrange it to look exactly how you would want in mobile.

Then make your new three bars only visible in mobile and make your existing 3 bars to be visible only in desktop.

All in all you will have six bars.

Hope that makes sense.

Thanks