DAWN: Moving the search icon to the left on mobile only

Store Design
1

jhjkl.PNG
jhjkl.PNG457×817 378 KB

Please someone help me. I have spent HOURSSS trying so many different things to
accomplish this.

1 Like
2

hi @JordanAmber please share the store url with the password I will give you a simple CSS line of code it will be on left in mobile after applying that.

Thanks

3

@JordanAmber

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Jamberleboutique.com

Password: Amberle

5

Jamberleboutique.com

Password: Amberle

1 Like
6

@JordanAmber

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 989px) {
details-modal.header__search {
    position: absolute;
    left: 80px;
}
details[open]>.search-modal {
    top: 90px;
    width: calc(100vw - 55px);
    margin: 0px auto;
    left: -50px;
}
}

@media screen and (max-width: 749px) {
details-modal.header__search {
    left: 40px;
}
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
    left: -40px;
}
}
7

@JordanAmber

please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 989px) {
details-modal.header__search {
    position: absolute;
    left: 80px;
}
details[open]>.search-modal {
    top: 90px;
    width: calc(100vw - 55px);
    margin: 0px auto;
    left: -50px;
}
}

@media screen and (max-width: 749px) {
details-modal.header__search {
    left: 40px;
}
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
    left: -40px;
}
}
8

sdf.PNG
sdf.PNG513×800 344 KB

It is too far & this is what it looks like when it is clicked on.

1 Like
9

@JordanAmber

can try this code

@media screen and (max-width: 989px) {
details-modal.header__search {
    position: absolute;
    left: 80px;
}
details[open]>.search-modal {
    top: 90px;
    width: calc(100vw - 55px);
    margin: 0px auto;
    left: -15px;
}
}

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

After code view

KetanKumar_0-1650872549907.png
KetanKumar_0-1650872549907.png1920×1080 242 KB

10

Thank you so much! The Icon position is perfect! Is there any way that the search bar can appear as its original size & in the original position? Like this?

sdf.PNG
sdf.PNG472×821 296 KB

1 Like
11

@JordanAmber

yes, please remove my all code after i will give you new easy short cort

12

Okay I removed it.

1 Like
13

@JordanAmber

great, please add this new code

@media screen and (max-width: 989px) {
.header__icons details-modal.header__search {display: none;}
.header--top-center>.header__search {display: inline-block;margin-left: 30px;}
header-drawer {position: absolute;}
}
1 Like
14

@KetanKumar can you help me? I tried your code and it doesn’t work

15

@Jiozx

I don’t know if you still need this but, try pasting this code in your custom theme css. It’s in the customizations.

Customize>Theme Settings>Custom CSS:

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