Hide Hover Effects of Buttons in Mobile Menu

Technical Q&A
, ,
1

Hi

When hovering on the burger menu icon or any items in the menu on my mobile website (Horizon theme), there is a hover effect where the button area darkens. I would like to hide this, if possible.

My website is 3rd Day Christian Clothing.

Thanks so much for any attention you can offer,

Asa.

2

Are you able to provide some screenshots or recordings? Usually that’s just the case of some CSS rule that’s being applied to your burger menu icon and menu items. Should be a relatively easy fix to delete/comment out the style that’s causing it!

3

That darkening effect is just the theme’s default hover/active state on mobile. You can remove it with a small CSS tweak.

Go to Theme settings → Edit code → base.css (or theme.css) and add:

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus,
.header__icon:hover,
.header__icon:focus {
background: transparent !important;
}

This will stop the dark overlay on the burger menu and menu items

4

Sure, sorry for the delay.

Here it is: https://drive.google.com/file/d/18j_PzCX29X16GY5T-rVpnneoDJuXfIVP/view?usp=sharing

Thanks.

5

Thanks so much for this, I tried it but it didn’t work.