How to make my search bar in mega menu turn into magnifying glass icon?

Shopify Discussion
1

Hi everyone,
I wanted to make my website spacious so I want my search bar turn into a maginifying glass or search logo. See photo for reference: and also if you know how to remove the extra search bar in my mega menu that would be great.
Sore Preview UrL:https://njm7880s3hx9loio-13830324282.shopifypreview.com

IntechCarl_0-1741227363029.png
IntechCarl_0-1741227363029.png1865×797 165 KB

2

Hi @IntechCarl

I check and your store only have 1 search bar on the right, could you please show the one on the left too?

image_720.png
image_720.png719×330 65.4 KB

Best,

Daisy

3

@DaisyVo Hi! I have displayed the 2nd search bar on the left. So how do I hide the search bar on the right?

4

Hi @IntechCarl

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.header__icons.header__icons--localization.header-localization .EzfyHeaderSearch.EzfyHeaderSearch--desktop {
    display: none !important;
}

Here is the result:

image_720.png
image_720.png720×363 164 KB

I hope this helps

Best,

Daisy

5

@DaisyVo Yes, but how do I turn it into a search Icon/magnifying glass icon?

6

HI @IntechCarl

This requires modifications to the theme code and cannot be resolved by simply adding CSS. A more in-depth adjustment is needed to properly implement the changes.

I would recommend that you hire a professional developer to handle this, as it involves coding expertise beyond basic styling adjustments. Investing in a skilled developer will ensure the changes are implemented correctly and efficiently.

Best,

Daisy