Menu and Mega Menu Colour Change

Store Design
1

I have Testament theme from We Are Underground and need to change 2 things. Need to change the main top drop down to remove the outdated Block look on hover. It looks tacky and old. I need to the text in Menu to change colour in both the top tier and second tier on hover instead. So when you hover over the menu, the entire menu block is not coloured to show the entire block, instead only the text changes colour when you hover only.

Then I need the Mega Menu (which ive hidden as looks silly at the moment) to match aswell. Currently If I was to unhide, the text is black and the background is black so you cant see the text.

Heres my site link - www.shaunjones.com.au

Appreciate any help :slight_smile:

2

Hey @shaunjones76

Not sure if that’s what you mean but try adding this code.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
ul#main-nav li a:hover {
    color: red !important;
}
ul#main-nav li:hover {
    background: #171615 !important;
}
</style>

NOTE: Change the color red to any color you want.
RESULT:

image
image1477×589 346 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Thank You so much buddy :slight_smile: . But I need the block removed so when you hover on only text shows and block colour doesnt appear :slight_smile:

4

Also the mega menu isnt reflecting same.

5

Can someone please help!

6

You may try adding this:

ul#main-nav li ul.submenu li:hover {
    background: inherit !important;
}

As for mega-menu – your theme version is very old and looking at theme demo store to suggest changes will likely produce wrong results.

Make a theme copy with mega-menu enabled and share a preview link to this draft theme – it should contan the preview_theme_id= parameter:

Screenshot 2026-05-16 at 1.27.47 PM
Screenshot 2026-05-16 at 1.27.47 PM1093×625 148 KB

Or enable mega-menu on your live theme so we can see how it’s structured and provide proper code.

7

Thank You so much, solved :slight_smile: . Ive just enable Mega Menu for you :slight_smile:

8

And also in the Mega Menu under the titles, theres a ugly looking Line that needs to go aswell :slight_smile:

9

Try adding these rules as well:

ul.megamenu h4 {
  border: none;
}

.megamenu h4 a {
  color: inherit !important;
}

ul#main-nav li:hover {
  background: transparent !important;
}

Maybe also this to make color change faster since there are no more background change:

nav a {
  transition: color 0.15s ease-in;
}
10

OMG Thank You so much :slight_smile: really awesome, thanks mate :slight_smile:

11

Hey @shaunjones76 . Hope you are doing great .

Use browser DevTools to find the exact class name, then in your custom CSS, remove the hover background and only change the text color.

For the mega menu, set the background set bg to white and text to black.

12

Remove Hover Blocks & Change Text Color: Go to Online Store > Themes > Customize. Open your Header or Navigation settings on the left. Under the Colors panel, change the Menu Hover Background to transparent (or match your main page background color) and set the Menu Hover Text to your preferred accent color.

Fix the Mega Menu Visibility: While still in your theme’s Colors settings, look for the Mega Menu / Dropdown color section. Change the Dropdown Background to white (or a light color) and ensure the Dropdown Text is set to a dark color, so it contrasts clearly and becomes readable.