Remove search bar on mobile version, supply theme

[chile888]

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]

@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! 

[chile888]

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

[dmwwebartisan]

@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! 

[chile888]

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

[dmwwebartisan]

@chile888 

Can you please share your url?

[chile888]

chi-herbal.myshopify.com

[dmwwebartisan · Accepted solution]

@chile888 

Use the following code for the mobile.

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

Thanks! 

[chile888]

Beautiful ty