Remove search bar on mobile version, supply theme

Store Design
1

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;
}

1 Like
2

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

3

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

1 Like
4

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

5

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

6

@chile888

Can you please share your url?

7
1 Like
8

@chile888

Use the following code for the mobile.

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

Thanks!

1 Like
9

Beautiful ty

1 Like