I have a shopify theme and with the menu and I need the block colour to not be a colour. So when you hover over the Menu and then Drop Down the Menu, hovering over a field, I want the colour to remain as it is which is Tan, but dont want the outdated Block to show, so when hovering the animated block colour doesnt show, just the other colour being the Tan colour.
my page is - www.shaunjones.com.au
It sounds like the hover effect is being controlled by your theme’s CSS rather than a menu setting.
You may want to inspect the menu element in your browser and look for a CSS rule that changes the background color on hover, something similar to:
.menu-item:hover,
.dropdown-item:hover {
background-color: transparent !important;
}
If you’re using a premium or heavily customized theme, the exact class names may be different.
Could you share the name of the Shopify theme you’re using? That would make it easier for someone to point you to the correct CSS file and selector.
Hiya, theme im using is Testament by We Are Underground
Thanks for the clarification. Since you’re using the Testament theme, it sounds like the hover styling may be built into the theme’s navigation settings or custom CSS rather than Shopify itself.
Before adding custom code, it might be worth checking whether the theme has a setting for menu hover effects or animations in the theme editor.
If anyone here has worked with the Testament theme specifically, did you remove the hover background effect through the theme settings or by editing the CSS files directly? It would be helpful to know the safest approach before making changes.
To remove the menu background hover block, go to your Shopify Admin > Online Store > Themes > Customize.
Click on your Header section, look under the Colors settings, and change the Dropdown Hover Background color to transparent or match your main page background.
Add this one rule and the grey block disappears whilst the tan stays:
css
ul#main-nav > li:hover {
background: transparent !important;
}
Where to paste it: Online Store > Themes > your live theme > the ··· menu > Edit code > Assets > stylesheet.css > scroll to the very bottom > paste > Save.
Two separate rules control your menu hover (I pulled your live stylesheet to check). ul#main-nav li:hover sets #c7bdbd, the grey “block” that sits behind a top menu item when a dropdown is open. ul#main-nav li ul.submenu li:hover sets #c2a986, the tan on the dropdown items themselves. Because they are separate rules, removing the grey one leaves the tan completely untouched. Right now, when you hover a dropdown field you see both at once: tan on the field, and that grey block still up on the parent item. The rule above removes only the grey.
This is also why the earlier .menu-item:hover / .dropdown-item:hover suggestion did nothing. Testament does not use those class names, so it was targeting elements that are not on your page.
If you would rather the top item turn tan instead of going blank, swap transparent for #c2a986.
One thing to know: this edits the theme file directly, so a future theme update could overwrite it. Re-paste it after any update, or ask We Are Underground (the theme’s makers) to add it for you so it sticks.
Hey @shaunjones76 . Hope you are doing great.
You just need to add a code in your theme CSS
.nav-dropdown li:hover {
background: none;
}
Hi, add this to your theme’s CSS to remove the grey block but keep the tan hover:
ul#main-nav > li:hover {
background: transparent !important;
}
Go to Online Store > Themes > Edit code > Assets > stylesheet.css, paste it at the bottom, and save. This targets the grey block without affecting the tan color.
I realize this is from a while ago, but I’m curious if anyone found new methods to handle hover effects in the Testament theme? I’ve recently come across a similar challenge, and I’m wondering if newer updates or tools have been released that make it easier to manage without custom CSS changes. Would love to hear any fresh insights or experiences!