How do I hide search icon from mobile version? (Dawn)

[mesetan]

I want to keep displaying the search icon on desktop but remove it for the mobile version as it makes my logo look off-center, is there a way for me to do this on dawn? Any help would be appreciated!

[PageFly-Victor · Accepted solution]

Hi @mesetan 

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
.header__search {
display: none; 
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[GoombaGrows]

This may be 2 years old but still works and helped me! Thank you 🙂

[GemPages]

Hi @mesetan 

I would like to give you a solution.

You can add code to remove the search icon on only mobile by following these steps:

1. Go to Online Store -> Theme -> Edit code. https://prnt.sc/js2u9lX4TESb

2. Open your base.css in the Assets folder.
3. Paste the below code at the end of the file.

@media screen and (max-width: 767px){
  .header .header__search {
     display: none !important; 
  }
}

4. Save file, then double-check.

Best regards,
GemPages Support Team