1

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.

Improve this question
4
  • You can manage it through css. No need to do extra coding.
    – Sukumar Gorai
    Jun 12, 2018 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, 2018 at 10:51
  • Are you using any different theme or luma?
    – Sukumar Gorai
    Jun 12, 2018 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, 2018 at 11:01

1 Answer 1

Reset to default
5

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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