Please help!! Dropdown menu color problem!

Highlighted
New Member
11 0 0

Hello,

I am soliciting some help regarding my mobile drop down menu search text color. When you first access the drop down, the menu displays with the search field at the top with white text “Search all products....”, (picture #1 attached), however, when I input a search variable the text changes to black (picture number 2 attached). 

I want to change that text to remain white when the customer enters a search value. It is important to note that this is only in the mobile drop down. In the desktop/ laptop mode the search works perfectly fine, so I don’t want to change that text from black. I’ve played around in the css files and the main edit theme area with no success.

Any and all help appreciated.

www.diecasthangar.com

 

0226DFA2-2117-4A8B-8743-D1790C2E119C.jpeg

Then when you type it’s black:

ECD7D831-5AB8-4463-B28A-E966E2A36429.jpeg

 Thank you in advance!!

Ben

0 Likes
Highlighted
New Member
1 0 0

Hey Ben,

     Just had a quick look to your web and came to find out that the color for the input for mobile does not look to be set up. You will need to add a bit of css code to your themes theme.scss.liquid (in the assests directory ).

 

Just find the line containing below code and add the css of color:white in the stylesheet.

for ex.

        .search-bar input[type="text"], .search-bar input[type="search"]{color: white ;}

 

the would fix the problem. Let me know if you need any more help.

 

Regards,

Shreyank

0 Likes
Highlighted
New Member
11 0 0

Thank you for the reply. Will that change the color of the text on the desktop site thought? I want that to remain black.

 

thanks!

0 Likes
Highlighted
Astronaut
1074 173 210

@diecasthangar 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.nav-bar [type='search']{
    color: white !important;
}



Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
11 0 0

I was able to get it fixed!! Thank you everyone.

 

Ben

0 Likes
Highlighted
Astronaut
1074 173 210

@diecasthangar 

You're welcome.

Please make sure to click on the button "Accept as Solution" below the answers that helped you to help other people in the community with similar issues in the future.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes