How to fix a see-through search bar on the Dawn theme?

Topic summary

A user encountered an issue where the search bar on their Dawn theme website (desire-online.net) has transparent/see-through ends when activated, unlike a fresh Dawn theme installation where the ends appear solid.

Two solutions were provided:

  1. theme.liquid modification: Add specific code above the </head> tag in the theme.liquid file (though the exact code snippet appears corrupted in the original post)

  2. CSS fix: Add the following code to the bottom of the base.css file:

details[open] > .search-modal {
  background: #3f3f3f !important;
}

Both solutions involve accessing the theme code through Online Store > Themes > Edit Code. The CSS approach targets the search modal’s background color directly to eliminate the transparency issue. The discussion remains open with no confirmation of which solution worked.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.

So on my website when i press the search button, the ends of the search bar are see through, but when i open a new dawn theme, the ends are not see through, how do i fix this/ change it back?

theme:dawn

website:desire-online.net

Hi @jakegrieveson

You can follow the following steps:

  1. Please go to the Online Store
  2. Then Edit Code
  3. Please find the theme.liquid file
  4. And add the following code in theme.liquid file above the tag

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

Hi @jakegrieveson

You can solve it by adding this CSS code to the bottom of base.css file in Online store > Themes > Edit code > Assets

details[open] > .search-modal { background: #f3f3f3 !important; }