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

Solved
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

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
2490 417 525

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
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
Shopify Expert
2490 417 525

Send me your store url. 

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

0 Likes
Shopify Expert
2490 417 525

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
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

Success.

Shopify Expert
2490 417 525

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Tourist
12 0 0

It worked! Thank you. :) 

0 Likes