Change search bar to white

Store Design
, , , , , , , ,
1

Hi, I need to change the search bar in mobile drawer to white with black font. My site is https://lux360.net

689742F4-4F3F-481D-82A0-EEA3428861CD.png
689742F4-4F3F-481D-82A0-EEA3428861CD.png1170×2532 112 KB

2

Hey @Luxluxlux360

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 tag

RESULT:

Moeed_0-1730204211124.png
Moeed_0-1730204211124.png376×662 4.02 KB

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

Best Regards,
Moeed

3

Hi @Luxluxlux360

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
div#search-drawer {
    background: white !important;
    color: black !important;
    border-block: 1px solid rgba(0, 0, 0, 0.5) !important;
}
}

Here is the result: https://prnt.sc/GXJrb0Nbyux-

If it helps, please let us know by giving it a Like or marking it as a Solution!

Best Regards,

Daisy

4

Hi @Luxluxlux360 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media only screen and (max-width: 479px) {
    .search__predictive {
           --bg: #fff;
    border-top: 1px solid var(--COLOR-NAV-BORDER);
    border-bottom: 1px solid var(--COLOR-NAV-BORDER);
    --text: var(--COLOR-NAV);
    --text-dark: var(--COLOR-NAV);
    --text-light: var(--COLOR-NAV);
    }
}