How to Hide the Search Bar on Mobile View

CMS & WordPress
1

Hi Guys,

I have been trying to hide the search bar on mobile view but no luck. Here is the code I am using:

@media (max-width: 650px) {
   form#searchform  {
      display: none;
    }
}

Here is the website: <link removed at OP’s request />

Where am I going wrong?

Thanks

2

It does work. But you have a mobile-specific search bar that appears for mobile. Called #search-form2. It’s right below #searchform.

3

Hi Ryan, thanks for responding, yes before I had this code:

@media (max-width: 650px) {
   form#searchform 2 {
      display: none;
    }
}

But the search bar was still showing but only smaller and out of place that’s why I thought I should ask.

4

Well the original code you had (in post #1) does indeed work. Remove that rule and hten shrink the window down and you’ll see two search bars. I’m not entirely sure what you are after now that you have confirmed that it’s working.

I should note that your CSS above in post #3 is invalid. Look at the rule

form#searchform 2.

What’s wrong with that? The space between searchform and 2. That’s not doing anything.

5

Actually, it’s not working. Here is the code:

    #search-form { float:right; margin:61px 0 auto 16px; position:relative;}
    #search-form .search-text-box, #search-form2 .search-text-box2 { background-color: #f3f3f3;  background-image: url(./images/search-icon.png); background-position: 12px 50%; background-repeat: no-repeat; border: 0 none; border-radius: 18px; box-shadow: none; color: transparent; cursor: text; font-size: 13px; color:#444; height:18px; line-height: 18px; padding: 7px 5px 8px 30px; transition: all 0.3s ease-in-out 0s; width: 1px;}    
    #search-form2 { display:none; position:relative; }
    #search-form2 .search-text-box2 { width:0px; margin:auto; position:relative; }
    #header.super-fixed #search-form { margin-top:29px;}

I changed the ( #search-form2 .search-text-box2 { width:0px; margin:auto; position:relative; }

) width from 220 to 0 but still not working.

6

Yes you give it display:none there, but later on in the stylesheet (around 300 lines later) you call this.

@media only screen and (max-width: 767px)
#search-form2 {
display: block;
}

That overrides the display:none; you just set. So if you don’t want it to display then set this display:block to none. Not entirely sure why you have two search bars to begin with though.

7

They are all set to none but still showing.

The theme is from Themeforest

8

I already explained in my previous post that you are wrong. Please re-read my previous post. It is being overridden. Your display:none; is being overridden by the code in post #6.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.