Move search icon in mobile to left side of header

[Mrstep]

would like to move search icon to the left side of the screen see pic for move. on mobile only. www.shopcuzzo.com 

[devcoders]

Hi @Mrstep 

For mobile, we will need to make structural changes through coding.

[BSSCommerce-HDL · Accepted solution]

Hi @Mrstep, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
svg.icon.icon-search {
    position: absolute;
    left: -165px;
}
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Arif_Shopidevs]

Hello, Please follow this steps to add the css

Step 1: Navigate to your Shopify admin panel and go to "Online Store."

Step 2: Click on "Themes" and then select  Edit code

Step 3:  Find base.css

/* Show .header__search only on mobile devices */
@media (max-width: 768px) {
 
      .header>.header__search {
        display: block;
        grid-area: revert-layer;
        margin-left: 29px;
        position: -21px;
        margin-top: -44px;
    }

  .header__search {
    display: none;
  }
}

  Step 5 : sections/header.liquid   line 173  add bellow code 

 {% render 'header-search', input_id: 'Search-In-Modal' %}

The the first search icon will hide in mobile and show in desktop the new one show in mobile and hide in desktop like this screen shot

Let us know if it is solved or not.
Thank you

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi  @Mrstep Please add code here to change position Search Icon

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  @media screen and (max-width: 767px){
    .header__search{
          position: absolute !important;
          left: 65px !important;
   }
 }
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly