How To Move Search Icon From The Left To The Right In Header - Desktop Version - Dawn Theme

Store Design

Topic summary

Goal: Move the search icon to the right side in the Dawn theme on desktop (mobile already correct). A screenshot illustrating the issue was provided.

Progress:

  • A helper requested the store link; the OP shared a development preview (password-protected).

Proposed fix (code-level and theme settings):

  • In header.liquid, search for “icon-search” and comment out that instance (removes the left-placed search icon).
  • In the Theme Customizer: Header → Custom CSS, add:
    @media screen and (max-width 990px)
    .header__search {
    display: block !important;
    }
  • Rationale given: the search icon is shown on mobile but hidden on desktop; this CSS change is intended to make it visible on desktop.

Status and outcomes:

  • No confirmation yet that the steps worked; the helper asked for feedback.
  • Discussion remains open, with the shared code snippet central to the solution.
Summarized with AI on January 25. AI used: gpt-5.
1

Hello,

I’m trying to figure out how to move the search icon from the left to the right so that it’s with the other icons. My mobile version is already doing this but my desktop version will not. Would really appreciate some help with this. Please see screenshot.

Thank you in advance!

MOVE SEARCH ICON SCREENSHOT NE.png
MOVE SEARCH ICON SCREENSHOT NE.png1202×278 42.6 KB

2

Can you share the link to your website please? This would make it a little bit easier for me to guide you in the right direction. Thanks.

3

Hi, Thank you so much for the quick response!

My shop is in development so you need the password to enter.

Shop is: https://thehappydogsociety.myshopify.com

Password is: darling

4

Ok. Here’s how to do it:

  1. Go to your header.liquid code file, and do a search (Command + F) for “icon-search”. You’re looking for the search icon.

  2. Comment this icon out. (Command + /)

  3. Your search icon is currently being shown on mobile, and hidden on desktop. To show it on desktop, go now to your theme customizer.

  4. Click on the header, and go to Custom CSS.

  5. Type this code in:

@media screen and (max-width 990px)
.header__search {
    display: block !important;
}
  1. The search icon should be showing now.

Let me know if you were able to figure it out.