Why do I have 2 search bar in my home page dawn theme

[IntechCarl]

Hi everyone,

I change the alignment of my store logo to center, but the problem is it shows 2 search bar in my header. How can I remove the other one on the right? See photo for reference:
Store preview URL:https://njm7880s3hx9loio-13830324282.shopifypreview.com

[B2Bridge]

Hi @IntechCarl   , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

header.header > .EzfyHeaderSearch:first-of-type {
 display: none !important;
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[IntechCarl]

Hi @B2Bridge , Thank you for your response. I wanted to remove the bar on the right-side, and make te bar on the left side a search icon or magnifying glass.

[Kyle_liu]

Hi @IntechCarl 

Please check your 'snippets/header-search.liquid' file and search for 'predictive-search' to see if there are multiple files

[IntechCarl]

Hi @Kyle_liu , There are predictive-search, but I don't know which is which.

[Kyle_liu]

Is there a “header__icons header__icons--localization header-localization” wrapper, if there is remove it.

[IntechCarl]

Yes, Thank you! I saw it inside header.liquid the code is like this "{% render 'ezfy-header-search', input_id: 'Search-In-Modal', device: 'desktop' %}" I removed it inside the header and it disappeard on my desktop.

[Kyle_liu]

I'm glad to have helped you, if this is helpful, please Like and Accept the solution.

[LizHoang]

Hi @IntechCarl 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

header.header > .EzfyHeaderSearch:first-of-type {
 display: none !important;
}

Best,

Liz

[DaisyVo]

Hi @IntechCarl 

To complete your requests, please follow these steps: (Remove all the old code you have added for this search bar)

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: 

I hope this helps

Best,

Daisy