Remove the search icon from the Shopify Dawn Them only on mobile

Solved

Remove the search icon from the Shopify Dawn Them only on mobile

sim25ecom
Shopify Partner
14 0 3

Hi,

 

I would like to remove the Shopify search Icon on the mobile Version of the Shopify Dawn theme. But only on mobile. On desktop it should be there. I tried some codes from the forum here, but they did not work. Grateful for any help! Thanks a lot!Bildschirmfoto 2023-12-22 um 13.04.40.png

Accepted Solutions (2)
Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

Hi @sim25ecom 
Add below CSS code to base.css

@media only screen and (max-width: 650px) {
  .header__search {
    display: none;
  }
}

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Made4uo-Ribe
Shopify Partner
9870 2351 2947

This is an accepted solution.

Hi @sim25ecom 

Check this one,.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
details-modal.header__search {
    display: none !important;
}
}

 

Andf Save.

Result:

Made4uoRibe_0-1703257624441.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 6 (6)

Huptech-Web
Shopify Partner
1047 208 225

Hi @sim25ecom 
Can you provide the store URL of Shopify as this https://fitfeet.org/ store shows on WordPress

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
sim25ecom
Shopify Partner
14 0 3

Sure. Here the  Shopify URL and the password: https://kompressionssocken.myshopify.com/

 

Password: autwob

Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

Hi @sim25ecom 
Add below CSS code to base.css

@media only screen and (max-width: 650px) {
  .header__search {
    display: none;
  }
}

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
sim25ecom
Shopify Partner
14 0 3

Thanks for your help man! On the standard dawn theme it works well, but on my edited Dawn theme unfortunately not. I have added to custom codes for the header before (please take a look in the attachment). Is there a way to make the code work without removing the codes I have added before?Bildschirmfoto 2023-12-22 um 16.58.41.png

Made4uo-Ribe
Shopify Partner
9870 2351 2947

This is an accepted solution.

Hi @sim25ecom 

Check this one,.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
details-modal.header__search {
    display: none !important;
}
}

 

Andf Save.

Result:

Made4uoRibe_0-1703257624441.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
sim25ecom
Shopify Partner
14 0 3

Thanks for your help man! On the standard dawn theme it works well, but on my edited Dawn theme unfortunately not. I have added to custom codes for the header before (please take a look in the attachment). Is there a way to make the code work without removing the codes I have added before?Bildschirmfoto 2023-12-22 um 16.58.41.png