How to hide search field from mobile version

Dresstive · December 2016

Hello! I have two quick questions.

1. Is there some custom CSS to hide the search field from Mobile Versions? I don't want to hide the action button too that's why I don't use the option under responsive.

2. Is there a way to use the search field on desktop but use the search icon on phones?

Albert · December 2016

Hi,

1. Please send us link to page where you would like to do this first.

2. For this we do not have any css solution unfortunately.

Dresstive · December 2016

1. Of course! Sorry my bad. It is here http://marketingstimuli.com. I currently have the search icon not the search field, because of the issue on the mobile. So I just need a way to hide only the search field from mobile, but keep action button.

2. No problem!

Albert · December 2016

1. But as we can see, there is no search on mobile. Looks like you already removed it yourself. http://pasteboard.co/c3LWxhKId.png - this is how your header looks on mobile.

Dresstive · December 2016

I selected to hide both Action Button + Search Icon, because I don't know the CSS to remove just Search

Albert · December 2016

Ok, so to remove just search on mobile, you need to use the following css:

@media only screen and (max-width: 767px) {
    #Top_bar a#search_button { display: none !important; }
}

Dresstive · December 2016

Thanks a bunch!

Worked perfectly!!

Albert · December 2016

You are welcome!

How to hide search field from mobile version

Comments