Duplicated Search Icons

Store Design
1

I’m experiencing an issue with my store’s header where two search icons are appearing when viewed on a laptop or PC. This duplication doesn’t occur on mobile devices, only on larger screens. I’ve checked my theme settings but can’t seem to find the root cause. Has anyone else encountered this issue or have any suggestions on how to fix it? Any help would be greatly appreciated!

2

Hello @bagdonaviciusbm

You can search main class of search bar content then u can add display none css

3

Hey @bagdonaviciusbm

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 tag

RESULT:

Moeed_0-1721473358343.png
Moeed_0-1721473358343.png1900×881 215 KB

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

Best Regards,
Moeed

4

Hello @bagdonaviciusbm Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file

details-modal.header__search.block {
display: none;
}
@media screen and (min-width: 768px){
.header--top-center>.header__search {
display: none !important;
}
}

and the result will be

3.png
3.png434×451 108 KB

2.png
2.png1920×538 119 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

5

Thanks for accepting my solution,
please hit like button also.