How do I hide the search icon on mobile version?

Solved
quarterafter12
Tourist
5 0 2

Hello! 

 

I'm a new shopify user and I want to hide the search icon on the header for the mobile version of the website. I'm currently using the debut theme. 

 

Current header: Annotation 2020-04-28 194759.png

 

Please help! 

 

My URL: https://quarterafter12.com/

Password: comingsoon

0 Likes

This is an accepted solution.

Hi There,

 

Always backup your theme before making changes to the code.

 

Navigate to:

Online Store > Themes > Actions (Drop Down) > Edit Code > Sections > header.liquid > "CTRL + F" (to find)> type in site-header__search > add "small--hide" without quotations to the class.

 

This will hide the icon on mobile devices. 

 

Best, 

Kyle

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
quarterafter12
Tourist
5 0 2

it worked!! thank you so much !!! 

Cher_
Excursionist
20 0 5

Hi @FreshNarrative  

I’m using Brooklyn theme. Is there any way to show the search icon on mobile? 

Kind regards,

Cher

0 Likes