Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Navigation Menu Background color

Solved

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

Coreymw85
Excursionist
15 0 3

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.

Screenshot 2023-11-13 at 2.19.37 PM.png

 

.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;
}

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
9076 2167 2677

This is an 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:
  • Made4uoRibe_0-1699904248566.png
  • Note: You ca change the color you like. 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Made4uo-Ribe
Shopify Partner
9076 2167 2677

This is an accepted solution.

Do you mean this one?

Made4uoRibe_0-1699915372838.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
9076 2167 2677

Hi @Coreymw85 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Made4uo-Ribe
Shopify Partner
9076 2167 2677

This is an 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:
  • Made4uoRibe_0-1699904248566.png
  • Note: You ca change the color you like. 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Coreymw85
Excursionist
15 0 3

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
Shopify Partner
9076 2167 2677

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

Made4uoRibe_1-1699907170968.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Coreymw85
Excursionist
15 0 3

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
Shopify Partner
9076 2167 2677

This is an accepted solution.

Do you mean this one?

Made4uoRibe_0-1699915372838.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Coreymw85
Excursionist
15 0 3

Thank you!