Search icon move to the left

Store Design
,

Topic summary

A user wants to reposition their store’s search icon to the left side of the header and add an underline, referencing The Body Shop Canada’s design as an example.

Progress:

  • Another user provided CSS code to move the search icon left on desktop using absolute positioning and flexbox adjustments
  • The code targets .header__desktop__button and repositions it within .header__desktop__upper

Current Issue:

  • The CSS solution broke the mobile layout
  • The user is asking how to apply the styling only to desktop views

Status: Unresolved - awaiting guidance on restricting the CSS to desktop-only or fixing the mobile display issue. Note that the provided code already includes a @media (min-width: 768px) query, suggesting the mobile problem may require additional investigation.

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

Hello

How can i move my search icon to the left and have it underlined like this

TBS2023_0-1741948843017.png
TBS2023_0-1741948843017.png1506×259 13 KB

www.thebodyshop.ca

datsau

2

Hello, what is the password of your store?

3

www.thebodyshop.ca

datsau

4

Hi @TBS2023

Try adding this CSS under header > custom CSS

@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 auto;
  }

  .header__desktop__buttons--icons {
    margin-left: auto;
  }
}

I hope that helps.

1 Like
5

Please can you have a look at the mobile version

It has gone all wrong - how can i apply this only to desktop?