Moving the search icon to the right side - impulse theme

Solved

Moving the search icon to the right side - impulse theme

technase
Shopify Partner
209 1 47

Hi, can anyone help me with changing the location of the the search icon, I am using impulse theme and I want the search icon to be on the right hand side so its with all the other icons.
Any help would be appreciated. 

 

Link: https://testingstoresandthemes.myshopify.com/

Storefront password: test

technase
Accepted Solution (1)

Vinsinfo
Shopify Partner
485 164 167

This is an accepted solution.

@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" and paste the below code in the "Custom CSS" field and save changes.

 

.header-item--left .small--hide .js-search-header {
    display: none !important;
}
a.js-search-header.medium-up--hide {
    display: inline-block !important;
}

 

 

Vinsinfo_0-1714978917033.pngVinsinfo_1-1714978921213.png

 

 

Result will be like, 

Vinsinfo_2-1714978930417.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 5 (5)

laddisahsi
Shopify Partner
444 44 45

Hi @technase 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

 

<style>

a.site-nav__link.site-nav__link--icon.js-search-header {
    display: none !important;
}

a.site-nav__link.site-nav__link--icon.js-search-header.medium-up--hide {
    display: inline !important;
}

</style>

 

 

laddisahsi_0-1714976415019.png

 




 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

oscprofessional
Shopify Partner
16230 2426 3151

HEllo @technase ,
To Move Search Bar to the  right side You need to Edit the Code that header.liquid 

oscprofessional_0-1714977605802.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free

PageFly-Noah
Shopify Partner
1317 233 280

 

This is Noah from PageFly - Shopify Page Builder App

Hi @technase  you need find file header.liquid and find code contain box icon search and past it to fit position. like here:

PageFlyNoah_0-1714977998456.png

PageFlyNoah_1-1714978147335.png

With design in your website. The code icon search will near top file header.liquid.

 

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Vinsinfo
Shopify Partner
485 164 167

This is an accepted solution.

@technase Please follow below steps to move the search icon to right side. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Header" and paste the below code in the "Custom CSS" field and save changes.

 

.header-item--left .small--hide .js-search-header {
    display: none !important;
}
a.js-search-header.medium-up--hide {
    display: inline-block !important;
}

 

 

Vinsinfo_0-1714978917033.pngVinsinfo_1-1714978921213.png

 

 

Result will be like, 

Vinsinfo_2-1714978930417.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
technase
Shopify Partner
209 1 47

Thanks mate! worked like a charm

technase