[Resolved] menu-toggle mobile is with a background color

[Alejandro]

Hi guys,

I found an issue in the menu-toggle’s class. If you see my header in the mobile option, you can see a strange red background color, but I see the CSS and I dont have any code with that property. I also deleted all the code, but the background on the menu-togge continues.

I hope you can help me.

[David]

Hi there,

the issue comes from your Elementors styles – which generates this:

.elementor-kit-2724 button, .elementor-kit-2724 input[type="button"], .elementor-kit-2724 input[type="submit"], .elementor-kit-2724 .elementor-button {
    color: #FFFFFF;
    background-color: #F23D3D;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 20px 20px 20px 20px;
}

.elementor-kit-2724 button:hover, .elementor-kit-2724 button:focus, .elementor-kit-2724 input[type="button"]:hover, .elementor-kit-2724 input[type="button"]:focus, .elementor-kit-2724 input[type="submit"]:hover, .elementor-kit-2724 input[type="submit"]:focus, .elementor-kit-2724 .elementor-button:hover, .elementor-kit-2724 .elementor-button:focus {
    color: #F23D3D;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}

Which effects EVERY button on the page…. which includes the Navigation buttons. I wish Elementor would confine their CSS to just their own elements….

To fix this you will need to overwrite the CSS with some more CSS:

#mobile-header button.menu-toggle,
#mobile-header button.menu-toggle:hover,
#mobile-header button.menu-toggle:focus {
    color: #575757;
    background-color: transparent;
    border-radius: 0;
    border: 0;
}

[Alejandro]

Thanks David. Effectively the Elementor settings were the cause of the issue. Thank you very much.

[David]

Glad to hear you found the issue!

[Author]

Posts