Remove search bar on mobile version, supply theme

Solved
chile888
Tourist
7 0 4

Hey,

 

I'm trying to find a code to remove the search bar from the header on my supply theme, so far I've used the below code for my web version but i can't find a version for it to remove it from the mobile version

header.site-header__search-toggle {
display: none;
}

 

dmwwebartisan
Shopify Partner
4355 977 1243

@chile888 

Please add the following code at the bottom of your assets/ file.

 

 

@media screen and (max-width: 768px){
header.site-header__search-toggle { display: none; }
}

 

 

OR you can use it this way also.

 

@media screen and (max-width: 768px) {
.site-header .search-bar { display: none; }
}

 


Hope this works.

Thanks! 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
chile888
Tourist
7 0 4

the code comes up as an error, am i supposed to put it at the bottom of my theme.scss.liquid file?

dmwwebartisan
Shopify Partner
4355 977 1243

@chile888 

Really sorry, try this.

@media screen and (max-width: 768px) {
header.site-header__search-toggle { display: none; }
}

I corrected the above codes also.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
chile888
Tourist
7 0 4

the code doesn't error anymore however the search bar is still appearing :S

0 Likes
dmwwebartisan
Shopify Partner
4355 977 1243

@chile888 

Can you please share your url?

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
chile888
Tourist
7 0 4

chi-herbal.myshopify.com

dmwwebartisan
Shopify Partner
4355 977 1243

This is an accepted solution.

@chile888 

Use the following code for the mobile.

@media screen and (max-width: 768px) {
.nav-bar .search-bar { display: none; }
}

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
chile888
Tourist
7 0 4

Beautiful ty