How to eliminate header padding in the Dawn theme?

Store Design
, , , , ,

Topic summary

A user seeks to remove padding between their logo and menu in the Dawn theme header.

A solution is provided involving CSS customization:

Steps:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the Assets folder and locate the CSS file (base.css, style.css, or theme.css)
  • Add the following CSS code at the bottom:
@media screen and (min-width: 990px) {
  header:not(.header--middle-left, .header--middle-center) nav.header__inline-menu {
    margin-top: 0;
  }
}
  • Save the changes

The responder includes a screenshot showing the expected result and requests the original poster mark the solution if it resolves the issue.

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

https://milkymotorsports.com/

Can someone pls provide code to remove the small amount of padding in between my logo and menu?

Screenshot 2023-11-14 at 12.02.17 PM.png
Screenshot 2023-11-14 at 12.02.17 PM.png2880Ă—1282 384 KB

1 Like
2

Hi @milkymotorsport

Thanks for the info. Please check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 990px) {
.header:not(.header--middle-left,.header--middle-center) nav.header__inline-menu {
    margin-top: 0;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like