How can I move the search icon to the left on mobile in Prestige theme?

Store Design
1

Hi All,

Is it possible to move the magnifying glass icon to the left hand side mobile only, image below

URL : https://label-source.co.uk/

Theme prestige

Screenshot 2022-09-06 at 14.16.48.png
Screenshot 2022-09-06 at 14.16.48.png764Ă—1162 656 KB

2

Hi @Danielparsons !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

Please try this code;

  1. Go to Online Store----->Theme->Edit code
  2. Asset->/theme.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;
}
}

Best Regards;

Pagefly

3

Hi @PageFly-Victor thank you, i have just applied this and sadly has not worked

4

Hi @Danielparsons !

Bro you can try this code;

@media screen and (max-width: 767px){

.Header__Wrapper {position: relative;}

.Header__Wrapper a[data-action=“toggle-search”]{

position: absolute;

left: 50px;

}

}

Best Regards;

Pagefly

5

Bang on bro works a charm thank you!