How to enable dropdown menu hover on Testament

Store Design
,

Topic summary

Main issue: Add a background color on hover for dropdown menu items in a Shopify “Testament” theme, matching the main menu’s hover style.

What was tried: A CSS rule setting .dropdown { background-color: var(--nav-background-color); } was suggested but did not change the hover state of individual dropdown items.

Working solution: Apply hover styling directly to dropdown items and adjust padding:

  • .dropdown { padding: 0 !important; }
  • .dropdown .dropdown__menuitem:hover { background-color: #2f2f29 !important; color: #fff !important; }
    Users can replace the color values as needed.

Context: Images were provided to illustrate the target hover effect and the area to be colored, which helped clarify the requirement.

Outcome: The updated CSS achieved the desired rectangular hover background on dropdown items.

Status: Resolved; no remaining open questions.

Summarized with AI on December 22. AI used: gpt-5.
1

Hello
I want my dropdown menus also hover a background color as my main menu.

Currently only the Text Color changes, but I want a rectangular colored box on hovering dropdown menu.

submeny 1.png
submeny 1.png391Ă—466 9.01 KB

I want to hover my dropdown menu like this -

asd.png
asd.png233Ă—238 7.6 KB

Sorry for bad English, I hope I manage to make you understand what I need.

Website link: www.modfashiongs.uk

Thank you.

2

Hello @GiasUddin ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your stylesheet.css file and paste the following code at the bottom:

.dropdown {
    background-color: var(--nav-background-color); 
}

Thanks

3

I’m sorry it didn’t work.

Screenshot 2024-08-13 200837.jpg
Screenshot 2024-08-13 200837.jpg346Ă—466 24.2 KB

I want to fill the red marked area with different color when I hover my curser on it.

4

Please try this css

.dropdown{
padding: 0 !important;
}
.dropdown .dropdown__menuitem:hover {
    background-color: #2f2f29 !important;
    color: #fff !important;
}

Change color code a/to your need.

Thanks

1 Like
5

You’re a saver. Thank you!!

1 Like