0

Can someone explain to me how I can make the search bar to be consistently there and the magnifying icon does not need to be clicked to make it appear in mobile view?

My theme is based on Luma, Magento version 2.2.3

What is currently there (you need to click the search icon to make the search bar appear): Current View

What I want: What I want

Then I will just code it so the bar scales depending on the viewport.

  • You can manage it through css. No need to do extra coding. – Sukumar Gorai Jun 12 '18 at 10:49
  • It is what I'm having trouble with.. How do I get rid of the search icon and make the bar appear? – cz84 Jun 12 '18 at 10:51
  • Are you using any different theme or luma? – Sukumar Gorai Jun 12 '18 at 10:56
  • I do have a custom theme that is using Luma as the fallback. I'm only changing small things like colours etc and haven't done anything major. – cz84 Jun 12 '18 at 11:01
1

Add the below lines to your css:

.block-search .minisearch input#search{position:static;}
.block-search .minisearch .label{display:none;}

It works for me on luma theme. Use the above code under media query. Not for desktop.

  • This got rid of the magnifying glass but how do I show the search bar instead? – cz84 Jun 12 '18 at 11:10
  • Both should work. You need add position static to your input field. – Sukumar Gorai Jun 12 '18 at 11:11
  • Is it working for you? – Sukumar Gorai Jun 12 '18 at 13:27
  • Yes, thank you, marking it as correct, much appreciated! – cz84 Jun 12 '18 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.