Solved

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

sim25ecom
Shopify Partner
13 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)
Rishihuptech
Shopify Partner
351 63 68

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
5102 1217 1488

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 6 (6)

Rishihuptech
Shopify Partner
351 63 68

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
13 0 3

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

 

Password: autwob

Rishihuptech
Shopify Partner
351 63 68

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
13 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
5102 1217 1488

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


sim25ecom
Shopify Partner
13 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