How to change background color of mobile search bar on Supply Theme?

Solved
Highlighted
Tourist
12 0 0

Hi everyone. The background color of my mobile search bar is black, and I'd like to change it to white. (The background color on my desktop site is already set to white.) 

 

Can someone help with this? 

 

Thanks! :)

 

0 Likes
Highlighted

Hello 
Can you share your site url?

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
3913 559 940

Hi @Kate_0101 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#navBar .search-bar [type="search"]{ background-color: red;}
Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
12 0 0

Jasoliya, 

 

Thank you!

 

This did work, but it erases the "Search all products" text and the magnifying glass, as those are white.

Can I change this text to black so it is visible? 

 

Also, the border is now gone, too - Any way to add a light gray border maybe, to contrast the black background?

0 Likes
Highlighted
Shopify Expert
3913 559 940

Send me your store url. 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
12 0 0
TheCatStore.co

0 Likes
Highlighted
Shopify Expert
3913 559 940

Add this css:

 

#navBar .search-bar [type="search"]::placeholder,#navBar .search-bar [type="search"]::placeholder:-ms-input-placeholder ,#navBar .search-bar [type="search"]::-ms-input-placeholder {
    color: black !important;
}
.nav-bar .search-bar .search-bar--submit .icon { color: black; }

 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
12 0 0

Thank you again. The magnifiying glass shows up now, but "Search All Products" text is still gone. :( 

 

Thank you for all of this help! 

0 Likes
Highlighted
Shopify Expert
3913 559 940

This is an accepted solution.

Add this one, its because of override css and i am giving you just by console.

 

#navBar ::placeholder{color: black !important; }

 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
12 0 0

It worked! Thank you. :) 

0 Likes