How to move search icon to the right on homepage - dawn theme

Store Design
, , ,

Topic summary

A user seeks to reposition the mobile search icon on their Shopify Dawn theme homepage, as it appears too close to the dropdown menu icon.

Solution Provided:

  • Add CSS code targeting screens under 749px width
  • Adjust the .header__icon search icon positioning with left: 12.5% (later updated to 16.5%)
  • Insert the code in theme.liquid file before the </body> tag

Additional Request:
The original poster also wants to add a clickable link to a photo in their footer section that directs to the main store homepage. This secondary question remains unresolved in the conversation.

Technical Details:
The solution involves custom CSS with media queries and requires editing theme files through the Shopify admin panel (Online Store → Theme → Edit code).

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

Can someone please provide a code to move the search bar icon on mobile version a little to the right so that its not so close to the drop-down menu icon. Thanks in advance!!

FeminiqueByCameron LLC - Quality Comfortable Sleepwear

fbcgirl24_0-1709653821150.jpeg
fbcgirl24_0-1709653821150.jpeg577×999 82.8 KB

2

Hi @Anonymous

You can do that by using this code

@media (max-width: 749px) {
.header__icon.header__icon--search.header__icon--summary {
    left: 12.5% !important;
}
}
3

one more thing, how can i add a link to the photo in my footer section.

Web capture_6-11-2023_85255_www.feminiquebycameron.com.jpeg
Web capture_6-11-2023_85255_www.feminiquebycameron.com.jpeg588×666 25.5 KB

4

Hi @Anonymous

following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before in theme.liquid

@media screen and (max-width: 767px){ .header__icon.header__icon--search.header__icon--summary { left: 16.5% !important; } }
5

I should have been more specific, I want to add the link to my stores main homepage in my footer section photo.