Change Header Dropdown Background Colors

[CARDPIECE]

Hi there,

I am wanting to change the background color of the search field drop down as well as the cart drop down.

Its currently matching the background color of the header, I want it to be white instead. 

Thanks!

Store: cardpiece.com

[Moeed]

Hey @CARDPIECE 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.predictive-search__heading {
    color: black !important;
}
.predictive-search__item-heading a {
    color: black !important;
}
.predictive-search__item-heading span {
    color: black !important;
}
.predictive-search__item-heading mark {
    color: black !important;
}
.predictive-search__item-heading p {
    color: black !important;
}
.predictive-search.predictive-search--header {
    background: white !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSS-TekLabs]

- Here is the solution for you @CARDPIECE 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.search__input.field__input, predictive-search[open] .predictive-search, #cart-notification {
     background: white !important;
}
.search__input.field__input, .predictive-search__item--term, .predictive-search__item--term .icon-arrow, .predictive-search__heading, .predictive-search__item-heading, .cart-notification__heading, .modal__close-button.link, .cart-notification-product__name {
     color: black !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-TC · Accepted solution]

Hi @CARDPIECE ,

Please insert code at the end  base.css file

#predictive-search-results,
#cart-notification {
   background-color: white !important;
}

.predictive-search__item-heading,
.predictive-search__heading,
.cart-notification__heading,
.cart-notification-product__name,
#cart-notification .product-option,
.cart-notification__links button.link.button-label {
    color: #d73533 !important;
}

.cart-notification__links button[name="checkout"] {
    background: #d73533 !important;
    color: white !important;
}

#cart-notification button.cart-notification__close {
     color: #d73533 !important;
}