Topic: Mobile Menu height and color

willamato
April 19, 2023 at 12:29 pm

Hello

A thousand pardons if this has already been covered elsewhere but hoping you might help me real quick

Ive just built out a website, here http://rawtuba.com , which has a brown menu bars you can see, about 40 px high.

On an iphone however, its now blue and seems to be 80px high or so

Any idea whats causing that, or how to force a different styling?

I am using Elkementor on the site — is it possible it “took over” the mobile menu styling?? Ive never had that happen before.

At any rate — any help you might give is much appreciated!
Ying
April 19, 2023 at 1:24 pm
Hi William,

No worries, we are here to help 🙂

I am using Elkementor on the site — is it possible it “took over” the mobile menu styling??

It is the case, that Elememtor’s button style is overriding the GP theme style.
https://www.screencast.com/t/VSHuTCKa0

Can you try adding this CSS to override the Elementor’s style？
```
@media(max-width:768px){
body .main-navigation .menu-toggle {
    background-color: transparent;
}
}
```
As for the height of the menu toggle, did you add a custom selector .menu-toggle in the customizer> typography?

If so, the line-height is set to 60px there, you can change it to a smaller value, let me know if that’s not the case.
willamato
April 19, 2023 at 2:28 pm

Hello

Thanks for helping.

Do I add the suggested CSS into the Additional CSS module in the customizer menu?

I did not add any custom selector that I know of. Elementor allows you to set global styles for certain elements within Elementor if you want. That blue color is from a universal style setting I have there, for buttons — but I dont know why it drifted into the Generate Press menu system (?), or how to stop it from doing that (again, Ive never encountered this problem before)

But now, even worse, it appears that the mobile menu isn’t even toggling open any more!!

Im flummoxed.

I briefly tried using a plugin called Mega Max Menu — very popular, and which Ive used before — in the hopes of over-riding the issues. It didnt solve the issue, so I deactivated and deleted it…but now the situation is seemingly only worse…
willamato
April 19, 2023 at 4:43 pm

Hi

Rather than wrestle with Elementor, I surrendered to it, built the menu with it — and now things seem to work fine. Thank you for your help.

Will
Ying
April 20, 2023 at 8:41 am

You are welcome 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Mobile Menu height and color