Search icon move to the left

[TBS2023]

Hello

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

www.thebodyshop.ca

datsau

[ennovative-it]

Hello, what is the password of your store?

[TBS2023]

www.thebodyshop.ca

datsau

[Michael-Thomas · Accepted solution]

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. 

[TBS2023]

Please can you have a look at the mobile version 

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