Search Icon Header

Store Design
, ,

Topic summary

A user is trying to enable the search feature in the mobile header but encounters an issue where search icons appear on both sides of the logo instead of in the desired location.

Proposed Solution:

  • Another user suggests CSS code to hide the search element on mobile devices (max-width: 768px) using display: none !important
  • This code previously resolved a similar issue on desktop

Current Status:

  • The original poster reports that implementing this solution completely removed the search icon
  • A third user has requested the store URL to investigate the issue further
  • The discussion remains open with no working resolution yet

Note: Several posts contain reversed/mirrored text, making portions difficult to interpret accurately.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Is there a way to enable the search feature on the mobile header section? Currently, when I try to enable it with code, one icon appears on the left side of the logo and one appears on the right.

I had the exact same issue on the PC, which was resolved with this code:

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

Any help please?

2

Replace with this
@media screen and (max-width: 768px) {

.header–top-center>.header__search {

display: none !important;

}

}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

The search icon is completely gone now

4

Hey @bagdonaviciusbm , would you like to share the store URL. So, I can look further into your request.

Regards,
Osama Farooqi

5

wildbrews.co