How to add search icon for the mobile view header

[Speedy33]

Hi, 

I have search bar in the desktop, but i would like a search icon instead of search bar in the mobile view header.

[Moeed]

Hey @Speedy33 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Speedy33]

Of course, here is my url:

www.geistshop.hu

[Moeed]

Hey @Speedy33 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
#shopify-section-header .search:nth-child(1) {
    display: block !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Speedy33]

Thanks, but i hide this before, because i dont want a search bar, i would like a search icon in this way in the attached picture, and i alsowould like to the menu and the logo had a smaller margin 

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @Speedy33 For this you need to add custom code to the header section, you need to change the structure. If your theme has support, you can ask them to customize this section.

Best regards,

Richard | PageFly