Expand "search" form when magnifying icon clicked

Activello
1

Hey team!

As per my current settings in mobile view, the search field is hidden. I only wanna display the magnifying glass which fits my aesthetic better. But doing that means every time you click on it to search something, it directly loads the search results page (displaying "you searched for: ") instead of providing a text field/form for someone to type what they’re looking for.

How do I make it expand a search box (below or beside) instead when the magnifying glass icon is clicked?

My site is: www.lipstickalchemist.com

2

Hi @lipstickalchemist,

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

You can achieve it by using following plugin solution.

Best Regards,
Movin

3

Thank you for your swift response! :slight_smile: Is it possible to achieve it with CSS? That would be ideal.

4

You have to develop custom CSS code as described on the following pages to achieve it.

https://www.w3schools.com/howto/howto_css_animated_search.asp

5

Hi Movin!

I tried the CSS options but there seems to be some HTML involved and I don’t know the first thing about that :stuck_out_tongue: So I read up on the plugin which is just 17kb (supposedly) so I’ve downloaded and used it.
It works great except that it’s too high on the menu and when i try to adjust the margin or padding it repositions itself but also increases the height of the menu bar and throws it all off.
Could you help me out with this?

6

It also only displays on my desktop. It doesn’t show up on mobile at all!!! Just blank space where there used to be a magnifying glass icon.

7

Hey there,
Thank you for keeping in touch

On mobile, the search is located at the bottom of the mobile menu.

In regards tot he padding try this CSS which moves the search icon down/

li.search-menu.search-menu.sliding a {
    position:relative;
    top:5px;
}

Best Regards,
Support

8

Hey! Thank you, that code worked.

Unfortunately, it doesn’t solve the initial issue of displaying an expanding search button on mobile (I had my desktop view sorted earlier, but I do not mind having the magnifying glass only).
It needs to be displayed on the top right corner of the mobile view. Can you help me with that asap? It’s just blank space right now.
(also, I’m okay with it not showing up in the drop down menu)

9

Please use the following custom CSS code to display it in the right corner in mobile view.

@media (max-width: 768px){
.site-navigation-inner .navbar-nav li.search-menu {
    position: fixed;
    top: 0;
    right: 0;
}

li.search-menu.sliding form {
    right: 0;
    left: auto;
}
}
10

It doesn’t seem to work! :frowning:

11

I don’t see the shared CSS code use don your site so please clear W3 Total Cache on your site after using the code.

12

I removed the code since it didn’t help at all. It only removes it from the menu but doesn’t display on the top tab. I’ll put it back again, so you can check it out.

13

Please see the attached screenshot, it displays on opening the mobile navigation.

This is because it is a part of menu and if you want it to always display then you have to develop custom code.

14

Hello again!

The developer of the plugin has been kind enough to add mobile menu display and functionality. I’ve activated it as well and it works great. I would like help with the positioning of it though, so could you please provide CSS to align it better.

15

Sure we can help you.

I visited your shared site on mobile but didn’t see search form in header but in menu.

Please advise.

16

It shows up on mobile devices (but not on the mobile preview of editor). Attaching a screenshot.

17

No it doesn’t display for me on mobile chrome browser.

Which browser are you using?

Please test it on another browser and logging out from your site.

18

I tested too, it doesn’t show up on chrome or edge.

But it displays on the default/inbuilt phone browser, and when opened within facebook and within instagram.