hello how can i make my search bar like in Mobile View
mine looks like this right now !
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.liquidfile above the</body>tag to style the search bar - Solution 2 (Recommended): Add CSS code to
base.cssortheme.cssfile 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
1 Like
Hey @Sohan2198
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
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.