Search icon in Header- Broadcast Theme

Store Design
,

Topic summary

A user successfully repositioned the search icon to the left side of their header using custom CSS in the Broadcast theme. However, this created a visual issue where the opened search interface appeared incorrectly layered or positioned.

Another user provided a solution by adding a z-index property to fix the layering problem:

.header__desktop__upper {z-index: 11;}

Both users shared screenshots demonstrating the before and after states. The fix appears to resolve the display issue with the search interface when opened.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello

I have managed to move my search icon to the left using this code

<style>
  /* search icons*/
@media (min-width: 768px) {
  .header__desktop__upper {
    position: relative;
  }

  .header__desktop__button:has([aria-label="Search"]) {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .header__desktop__bar__c {
    margin: 0;
  }

  .header__desktop__buttons--icons {
    margin-left: auto;
  }
}</style>

However when open it looks like this

TBS2023_0-1750080641398.png
TBS2023_0-1750080641398.png1205×200 8.9 KB

Theme is not live yet

https://6qnwocv4sj1nwdn8-86803415371.shopifypreview.com

2

Hi @TBS2023

let add this Custom CSS code:

.header__desktop__upper {z-index: 11;}

the result

BiDealDiscount_0-1750082467630.png
BiDealDiscount_0-1750082467630.png1385×886 48.6 KB

1 Like