[Resolved] How to remove mobile menu button shaddow

[Richard]

I am not sure how this appeared but there’s a shadow on the mobile menu button on the top right of my website. Please take a look and advise how to remove this.

[Richard]

View post on imgur.com

[Leo]

Hi there,

Elementor is causing the issue.

Try this CSS to overwrite it:

.main-navigation.has-branding .menu-toggle {
    box-shadow: none !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Richard]

Thanks that worked. When I open that menu on mobile, the off canvas menu pops up as normal. But there’s a shadow box covering the “x” when I open up the mobile menu. How do I get rid of that?

[David]

Hi there,

there is this CSS on your site adding box-shadows to the button element:

body.elementor-kit-14 button, body.elementor-kit-14 input[type="button"], body.elementor-kit-14 input[type="submit"], body.elementor-kit-14 .elementor-button {
    font-family: "Fira Sans", fira sans;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

Is this required as it is this CSS affecting the exit button.

If you need that CSS then add this CSS to override it on the exit button:

button.slideout-exit {
    box-shadow: none !important;
}

[Richard]

That worked! Thanks David and Leo.

[Leo]

No problem 🙂

[Author]

Posts