How to move the search icon to the left on mobile in Dawn 15.4.0

Shopify Discussion
1

Hi everyone,

I’m using Dawn version 15.4.0, and on the mobile header, my search icon is currently on the right side, but I want it to appear on the left side, right next to the hamburger menu icon where it normally should be.

Does anyone know how I can move the search icon to the left on mobile only?

Also, is there a way to push all mobile header icons (search, account, cart) more toward the edges of the screen? At the moment they sit too close to my logo, and I’d like to create better spacing by moving them toward the screen corners.

Any help or CSS guidance would be really appreciated!

Thanks in advance.

Screenshot 2025-11-24 at 23.23.17
Screenshot 2025-11-24 at 23.23.17746×1492 173 KB

2

LINK: https://orm6wtygku9mqawm-64748617967.shopifypreview.com

4

Hi, I checked, but I’m not sure because the search bar is still fixed on the right side on mobile version?

5

Try this in the header’s custom css box.

@media screen and (max-width: 767px) {
  summary.header__icon.header__icon--search {
    position: absolute;
    left: 60px;
    top: 15px;
  }
}

Screenshot 2025-11-26 195852
Screenshot 2025-11-26 195852348×881 45.5 KB

6

Hi @crepscity

To move the search icon to the left, try putting the below code in your base. CSS file from your theme edit code option. Put this code at the end of the base.css file.

@media (max-width: 768px) {
  .header-wrapper .header__heading-link {
    padding-left: 48px; /* Adjust logo position */
  }
  .header__icons .header__icon--search {
    position: absolute;
    left: 60px; /* Adjust this value as needed for alignment */
  }
}

You can change the value of the left-side pixel to make the adjustment according to your need.

I hope this will help you. Thank you.