How to change drop down menu hover color?

Hello, I was able to change the color when I hover over my menu items except for when they have a drop down option.

As you can see, the top is without hovering. Bottom shows what it looks like when I hover over “CONTACT” and below that, “SHOP ALL”

“CONTACT” changes to green (correct)

However, “SHOP ALL” and “ABOUT” remains white

Hi @msevere ,

Would you mind to share your URL website with password if its protected?

Thanks!

marsevere.com

pass: rabbit

Thank you for the information.

You want to change the color of the text when it hover?

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
details#Details-HeaderMenu-1 span:hover {
    color: #6e950e;
}
details#Details-HeaderMenu-4 span:hover {
    color: #6e950e;
}

Thank you so much! That worked

Welcome. Happy to help. :blush:

Hello, It did not work for me - granted, I am not an expert at all… but I wonder what I did wrong? I mean I changed the Color, but did I do it wrong? Your help is much appreciated.

It wont work for the other store cause this code is for this store only. Would you mind to share your store URL and what menu link you like to change? So I can provide you the code. Thanks!

Hello :blush:

Thanks for replying. I manged to find the spot myself and even managed to code it in pink.

But thank you so much. I do have some other issues though so maybe you can help me?

My shop URL is https://fundesign.dk/

My issue is the color of the add quantity button or area on the product card. It so dark and I cannot find the spot where I change the color in the coding.

The same goes for the Add to cart button.

And finally my variant pills on my products with variants are also dark and I cannot find the coding spot for those either.

I understand if this os too many issues, and I do not at all expect an answer quickly :sweat_smile:

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-form__input input[type=radio]:checked+label {
    color: white !important;
}
.product-form__input input[type=radio]+label {
    background: white;
}
.quantity:before, .button {
    background: white !important;
}

And Save.

Result:

Note: You can change the color you like.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Thank you so much for your help. It worked. Only thing I need now is to change the un-checked pills background color… Right now they are black… Can you help me with that?

Also. How does it work to support you for the help you provided? I mean, can I donate something for your time somehow? I am new to all this, but believe in supporting for support.

Oh, I cant cant overide it if I put !important then all the pills will go white. But what i can do is to help you to locate the code.

Go to Asset folder in edit code.

section-main-product.css files and find the code below.

Made4uoRibe_0-1702844587805.png

change the background-color to the color you like..just be sure you dont remove other letter or colons. Must be like this example.

.product-form__input input[type='radio'] + label {
  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: white;
}

Save and refresh.

Yes, You can click the tips on the below link of my post. We are a volunter developer whoe likes to help the community to there store. A tip for coffee is so much appreciated. Thanks!