Need help customizing header in Dawn theme (move search icon & center logo)

Store Design
, , , ,
1

Hi everyone,

I’m using the Dawn theme for my Shopify store and I’d like to customize the header layout (only in mobile).

Here’s what I want to achieve:

  • The search icon should be placed next to the hamburger menu (on the left side).

  • The logo should be centered in the header.

Here’s a preview image for reference :backhand_index_pointing_down:

image
image361×571 46.8 KB

Store preview link (for context):
:link: https://3tuvlpx1gctxbzmo-93050175853.shopifypreview.com

If anyone could guide me with the CSS/Liquid code changes required (for mobile ), it would be super helpful. :folded_hands:

Thanks in advance!

2

You can use this code and check

@media (max-width: 749px) {
  .header-wrapper .header__heading-link {
      padding-left: 48px;
  }
 .header__icons .header__icon--search { 
     position: absolute; 
     left: 60px;
  }
}

Best regards,
Dan from Ryviu: Product Reviews App

3

There is a space after first dot which needs to be removed.

Also, @Sivadarshan – something is wrong with your header on tablet (width between 750 and 990px)…

4

Hello @Sivadarshan,

Please add this following code into your base.css file:

@media only screen and (max-width: 767px){
.header__icon {
position: absolute;
    left: 54px;
}
.header__heading{
text-align: center;
    align-items: center;
}
}

Here is the result:

Css code
Css code309×686 135 KB