How can I change the navigation menu background color to black?

[Coreymw85]

I am trying to change the background color of the main navigation menu drop down to black. It's been black previously, but no longer is. I've followed a few guides here and had no luck. I've tried adding the below code to the bottom of both the base.css and theme.liquid areas and no luck.

My site currently isn't published, so I'm not sure how to link someone to it in order get assistance.

 

.site-nav--has-dropdown:hover > *{
background: #000000 !important;
}

and also...

variant-selects select.select__select,
.product-form__quantity .quantity__input{
color: #000 !important;
}
variant-selects svg path,
.product-form__quantity .quantity__button svg path{
fill: #000 !important;
}

[Made4uo-Ribe · Accepted solution]

Thanks for the info, 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:

details[open] > .header__submenu {
    background: black !important;
}

• And Save. 
• Result:
• 
• Note: You ca change the color you like. 

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

[Made4uo-Ribe]

Hi @Coreymw85 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Coreymw85]

https://ioysqn4vf5seigy9-78766178616.shopifypreview.com

[Made4uo-Ribe · Accepted solution]

Thanks for the info, 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:

details[open] > .header__submenu {
    background: black !important;
}

• And Save. 
• Result:
• 
• Note: You ca change the color you like. 

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

[Coreymw85]

That worked, thank you. Could I ask one additional question regarding variant drop down text and background color? Or should I start a new question?

[Made4uo-Ribe]

No need to create new, Do you mean this variant?

I fix it, check it out. Same Instruction.

#infiniteoptions-container label, #infiniteoptions-container select, .product-form__input--dropdown label  {
    color: white;
}
#infiniteoptions-container option {
    color: black;
}

And Save. 

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

[Coreymw85]

Thank you.

The drop down I want to adjust is the top one, the one that says Sweatshirt in it. The background appears as white before clicking it. I want it to be transparent, just like the infinite Options variant options below it. And once that variant picker is expanded, I want it to appear as it is now, no change to the expanded view.

[Made4uo-Ribe · Accepted solution]

Do you mean this one?

Im not sure if this code will work cause a I the code is alreayd overide. 

Check this one. 

variant-selects select.select__select {
    color: white !important;
    background: transparent;
}
variant-selects svg path, .product-form__quantity .quantity__button svg path {
    fill: blue !important;
}

And Save. 

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

[Coreymw85]

Thank you!