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

Store Design
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.