How do I remove transparency from the search bar in Spotlight 13.0 theme?

[KGreene_24]

How do I make it so that when using the search bar, it doesn’t show up as transparent and has at least a white background? I’m using the spotlight 13.0 theme.

Site URL: https://minimeessentials.com/

[Sweet_Savior_3]

Hello @KGreene_24

Please paste the given CSS in base.css file at the bottom.

body .predictive-search {
 background: white;
}

OUTPUT:

Thanks

[ThePrimeWeb]

Hey @KGreene_24 ,

I’ll give you both options, The first one is if you just want to get rid of the transparency and keep the gradient colour, the second one is to get rid of the gradient and make it white colour.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Use this if you just want to remove the transparency but keep the gradient colour.

Use this if you want to get rid of the gradient and make it full white

Screenshot is for reference only, the correct code to paste is the one shown above.

[ThePrimeWeb]

This is the look for the gradient search

White is just white haha @KGreene_24

[KGreene_24]

Do you know how to change the background inside the search bar itself as well? Tp replace the gradient.

[ThePrimeWeb]

Hey @KGreene_24 ,

Same steps I listed earlier

Preview:

[Sweet_Savior_3]

Please add the CSS:

header .search-modal__content .search__input.field__input {
background: white;
}

OUTPUT:

Thanks