hi how can i move the search icon right next to the cart icon, to the left side of it. - dawn theme
URL: nightlightcity.com
pass: bowchu
Topic summary
A user seeks to reposition the search icon next to the cart icon (on its left side) in Shopify’s Dawn theme.
Two solutions provided:
-
GemPages approach: Insert custom CSS code into the
theme.liquidfile before the</body>tag. This method includes specific styling to relocate the search functionality. -
oscprofessional’s CSS solution: Add targeted CSS to the bottom of the
base.cssfile in the theme’s Assets folder:- Targets
details-modal#header-search - Uses grid positioning (
grid-column: 3/4) - Adds left padding and center justification
- Targets
Both solutions involve editing theme code files directly. Screenshots were shared showing the expected visual result. The discussion remains open with no confirmation of which solution the original poster implemented.
Hello @ni3
I would like to give you some recommendations to support you:
-
Go to Online Store->Theme->Edit code
-
Open your theme.liquid theme file
-
Paste below code before :
The result will look like the image below:
Hope my recommendation can work and support you!
Kind & Best regards!
GemPages Support Team
Hello @ni3
details-modal#header-search {
grid-column: 3/4;
padding-left: 10rem;
justify-self: center !important;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid
