Header Adjustments Dawn Theme

Store Design

Topic summary

A user seeks to optimize the Dawn themeā€™s mobile header by enlarging the logo, reducing spacing between cart and search icons, repositioning the hamburger menu further left, and making the announcement bar thinner.

Solutions Provided:

  • Two community members offered CSS code snippets to adjust header spacing and icon positioning
  • One solution targeted padding and icon widths using media queries for mobile screens
  • Both approaches involved adding custom CSS to the theme files

Issue Encountered:

  • After implementing the suggested code, the user discovered their mobile page began toggling horizontally (side-to-side scrolling)
  • Removing the CSS code resolved the scrolling problem, but reintroducing it caused the issue to return

Current Status:
The discussion remains unresolved, as the proposed solutions created an unintended side effect that conflicts with the desired improvements.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Any way I can make more room in Dawn theme Mobile header to make the logo appear bigger,

I already increased the width of logo to the max with a different code. I would like to decrease the space between the cart and search icon, also move menu hambuger to the left more and if possible make the announcement bar thinner. Thank you.

IMG_20250115_142527.jpg
IMG_20250115_142527.jpg1080Ɨ511 52 KB

pw test123

1 Like
2

Hi @Lavished

Try this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. In the ā€œtheme. Liquidā€ file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @Lavished

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
header.header {
    padding-left: 10px !important;
}
summary.header__icon.header__icon--search > span {
    width: fit-content !important;
}
summary.header__icon.header__icon--search > span > span.svg-wrapper:nth-child(1) {
    width: unset !important;
}
summary.header__icon.header__icon--search {
    width: fit-content !important;
}
}

Here is the result:

image_480.png
image_480.png260Ɨ479 118 KB

I hope this helps

Best,

Daisy

4

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!

5

I didnā€™t realized it caused a problem , or maybe something else did it, but now my mobile page toggles from side to side, right to left vice versa. :disappointed_face:

6

when I deleted the code the problem went away once I added it again the problem returned,- thank you.