Dawn theme search bar transperent !

Topic summary

A user seeks to make the search bar transparent in the Dawn theme’s mobile view, providing screenshots showing the desired appearance versus their current implementation.

Proposed Solutions:

  • Solution 1: Add custom CSS code to theme.liquid file above the </body> tag to style the search bar
  • Solution 2 (Recommended): Add CSS code to base.css or theme.css file targeting the slideshow component with specific margin-top styling for screens with max-width 600px

Key Details:

  • The user clarified they want the transparent search bar above the banner, not within it
  • Both solutions involve adding custom CSS code to theme files via the Shopify code editor
  • Screenshots demonstrate the expected visual outcome after implementing the CSS changes
  • The issue is specific to mobile view customization in the Dawn theme
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

hello how can i make my search bar like in Mobile View

mine looks like this right now !

Url:https://ao365q8tca6kpq1p-58506346583.shopifypreview.com

1 Like

Hey @Sohan2198

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:

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

Best Regards,
Moeed

I want above the banner. Not on banner

  • Here is the solution for you @Sohan2198
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
slideshow-component {
     margin-top: 39px !important;
}
}

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.