Hide search bar on mobile

I hope you are well today and thank you for your question.

You can hide it on mobile and tablet by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

@media only screen and (max-width: 1009px){
    form.is-search-form.is-form-id-6711 {
        display: none;
    }
}

Best regards,

Hi, thanks for the reply, the code you supplied does hide the search bar but is there a way to make it still appear in the form of a magnifying glass symbol and expand below when clicked? The user still needs to be able to search on mobile but the full search bar doesn’t fit.

I am also having an issue where I have created a template with Elementor for the search results page but for some reason the template does not apply. The search works but the design is still the default. Is this something you can help me with at all please?

• This reply was modified 1 year, 8 months ago by thevapourroomltd.

Hi, thanks for the reply, the code you supplied does hide the search bar but is there a way to make it still appear in the form of a magnifying glass symbol and expand below when clicked? The user still needs to be able to search on mobile but the full search bar doesn’t fit.

You can try using the below plugin option.

I am also having an issue where I have created a template with Elementor for the search results page but for some reason the template does not apply. The search works but the design is still the default. Is this something you can help me with at all please?

You have to contact the elementor support regarding this.

If you mean the mobile search setting below, I tried turning it on and it doesn’t seem to do anything. Is there an edit to the CSS code that might allow the search bar to appear as a symbol on mobile?

If you mean the mobile search setting below, I tried turning it on and it doesn’t seem to do anything.?

Please share a screenshot of the setting and remain it activated so I can troubleshoot it.

You can share a screenshot of it by uploading the screenshot on any image-sharing website like https://imgur.com/ and sharing its unique URL here.

Here’s the screenshot: https://snipboard.io/uASGOx.jpg

Thank you

The search icon is hidden on mobile due to z-index issue.

You can resolve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

div.is-menu-wrapper {
    z-index: 999999;
}

Hi, I followed your advice but unfortunately nothing has changed. The code I now have in the CSS field is:

@media only screen and (max-width: 1009px){
    form.is-search-form.is-form-id-6711 {
        display: none;
}

div.is-menu-wrapper {
    z-index: 999999;
}

Is this correct?

Thank you

You have incorrect code.

It should be as below.

@media only screen and (max-width: 1009px){
    form.is-search-form.is-form-id-6711 {
        display: none;
}
}

div.is-menu-wrapper {
    z-index: 999999;
}

That’s great, I now have a search icon, thank you!

Just one last thing, it is tucked away in the top corner and it looks a bit cluttered. How would I move it to sit between the account and cart buttons, or somewhere in line with the other icons in the header? A screenshot of what I’m seeing on mobile: https://snipboard.io/mFfUQ6.jpg

Please display the search icon on your website so I can help you to move it.

The icon is displayed on mobile, it is right up in the top right hand corner. The search on desktop is in the correct place.

You can move mobile search icon by using the below CSS code.

body > .is-menu-wrapper {
    right: 110px;
    top: 25px;
}

Sorry, unfortunately nothing has changed. Have I entered it correctly?

@media only screen and (max-width: 1009px){
    form.is-search-form.is-form-id-6711 {
        display: none;
}
}

div.is-menu-wrapper {
    z-index: 999999;
}

body > .is-menu-wrapper {
    right: 110px;
    top: 25px;
}

I also tried it like this:

@media only screen and (max-width: 1009px){
    form.is-search-form.is-form-id-6711 {
        display: none;
}
}

body > .is-menu-wrapper {
    right: 110px;
    top: 25px;
    z-index: 999999;
}

I can see it is working on your website.

Please test it clearing your browser cache.