How can I adjust the header size in the Dawn theme?

Store Design

Topic summary

Main issue: Reduce the header size in Shopify’s Dawn theme.

Proposed solution: Add custom CSS to the theme to shrink the header on desktop.

Implementation steps:

  • Go to Online Store → Theme → Edit code.
  • Open Assets → base.css.
  • Paste the provided CSS at the bottom of the file.

Key CSS details (code snippet is central):

  • A media query targets screens wider than 990px (desktop).
  • .header__heading-logo { width: 40% !important; } reduces the logo’s width.
  • .header { padding-top: 0rem !important; padding-bottom: 0rem !important; } removes vertical padding to compact the header.

Outcome: A clear, actionable CSS fix is provided to decrease header height on desktop.

Status: No disagreements or follow-ups; the guidance appears sufficient and likely resolves the request.

Summarized with AI on February 9. AI used: gpt-5.
2

Hi @paule3 !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

Please paste this code;

  1. Go to Online Store->Theme-> Edit code

  2. Asset->/ base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 990px){
.header__heading-logo {width: 40% !important;}
.header {padding-top: 0rem !important;padding-bottom: 0rem !important;}
}

Best Regards;

Pagefly