Move search icon from right side of header to left in mobile (Craft Theme)

Store Design
, ,
1

Hello,

I want to move the search icon to the right side of the header in mobile to the left side. I would like it to be just to the right of the hamburger menu. Please see screen shot below. I would appreciate anyone who could help. Thanks!

IMG_3390.jpg
IMG_3390.jpg1170×497 28.8 KB

2

Hello @smwolf ,

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->base.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
details-modal.header__search {
     position: absolute;
    left: 40px;
}
}

Thanks

3

Thanks so much for your quick response. Unfortunately that code is not working. Is there anything else I can try?

4

Use this one

@media screen and (max-width: 749px) {
details-modal.header__search .header__icon--search {
     position: absolute;
    left: 40px;
}
}

Is still not working then ping me after adding it so I can check in the source code.

5

thanks again but that code is also not working

6

Css is right but not sure what you already did in css file.

btw let’s try this one
Edit theme.liquid search for

and just before of it add css with style tag
7

Perfect that worked great!! Thank you so much