Archived topic
menu-toggle mobile is with a background color
3 replies · Started by Alejandro on December 16, 2020
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.
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;
}Thanks David. Effectively the Elementor settings were the cause of the issue. Thank you very much.
Glad to hear you found the issue!
