Shopify themes, liquid, logos, and UX
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;
}
Solved! Go to the solution
This is an accepted solution.
Thanks for the info, check this one.
details[open] > .header__submenu {
background: black !important;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an 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!
Hi @Coreymw85
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
This is an accepted solution.
Thanks for the info, check this one.
details[open] > .header__submenu {
background: black !important;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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?
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!
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.
This is an 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!
Thank you!
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024