How to adjust the header width on mobile devices? DAWN theme

[Sixpieces]

How to adjust the header width on mobile devices, I want to move the hamburger menu and search and bag icon more to the side, they are too close to the logo. I am using the dawn theme.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Sixpieces You can change position by edit code here:

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[EBOOST]

Hi @Sixpieces ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
  .header{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .header__icon, .header__icon--cart .icon{
    height: 4rem;
    width: 4rem;
  }
}

[Sixpieces]

@EBOOST This didnt work.

[EBOOST]

Hi,

You mean like the screenshot below?

[Sixpieces]

@EBOOST Yes exactly like that. I just want to be able to decide what I want as the header width.

Also why can’t I just edit the dawn theme code? The concept of adding code is weird to me because I assume there already is code for this, so how can I add new code that changes the width of the header, without removing the existing or just editing this code, to me this sounds like it will just break the website.

[EBOOST]

Hi,

If you don’t want add code to Assets/base.css. You can go to customize → settings → custom CSS add code below

@media(max-width: 749px){
  body .header{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  header .header__icon, header .header__icon--cart .icon{
    height: 3rem;
    width: 3rem;
  }
  header header-drawer {
    margin-left: -0.5rem;
  }
  header .cart-count-bubble {
    bottom: 1.5rem;
    left: 1.5rem;
  }
}