Does anyone know how to move the search icon magnifying glass to the right of the search box?

Solved
SCHOIE1981
New Member
6 0 4

Hi,

 

Does anyone know how to move the search icon (magnifying glass icon) so its justifed right of the serach input box instead of left?

 

Im using minimal theme.

 

Kind Regards.

0 Likes
dmwwebartisan
Shopify Partner
4356 977 1243

@SCHOIE1981 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
SCHOIE1981
New Member
6 0 4

hi @dmwwebartisan 

 

the url is - www.feelgoodstore.co.uk

 

kind regards

dmwwebartisan
Shopify Partner
4356 977 1243

@SCHOIE1981 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.supports-fontface .header-bar__search-input[type="search"]{
padding-right:70px;
}
.supports-fontface .icon-fallback-text .icon{
display: inline-block !important;
}
.header-bar__search-submit{ right: 0px; }

 

Let me know if this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
SCHOIE1981
New Member
6 0 4

hi @dmwwebartisan 

it didnt work... its all kinda messed up now, ive left it on for you to see. not sure if its cos i made some adjusts to the original serach bar location.. i moved it from the out of the box right to the centre of my page.

 

Kind regards

0 Likes
dmwwebartisan
Shopify Partner
4356 977 1243

@SCHOIE1981 

This is strange. Please reverse this. Let me see again.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
SCHOIE1981
New Member
6 0 4

hi,

 

Sorry it was my fault... i deleted the little bit of code above by mistake about the site-header

 

it worked perfectly!

dmwwebartisan
Shopify Partner
4356 977 1243

This is an accepted solution.

@SCHOIE1981 

Oh! great to hear this and my pleasure to help you.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
SCHOIE1981
New Member
6 0 4

You're a top man... i spent so long trying to do this!!

SCHOIE1981
New Member
6 0 4

hi @dmwwebartisan 

 

Sorry to be a pain, but ive just realise that the only reason i was moving the magnifying glass to the right is because it was clashing with the text when your type something to search... is there a way to correct it so it doesnt clash? i think that would be a better solution

 

Kind Regards