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

Store Design

Topic summary

Goal: reduce the header height in Shopify’s Dawn theme and adjust logo/banner sizing on desktop.

What worked (desktop focus):

  • Add custom CSS in Online Store > Themes > Edit code > Assets > base.css. Use a media query (CSS rule that targets certain screen widths) for larger screens (min-width ~990px).
  • Reduce header padding and control logo size, e.g.:
    • .header { padding-top: 0; padding-bottom: 0; }
    • .header__heading-logo { width: 40% (or adjust, e.g., 80%) }
    • .header__heading-link { padding: 0 }
  • Result: Original requester confirmed the header height reduction worked immediately.

Further adjustments:

  • To make the hero/banner shorter on larger screens, set:
    • @media (min-width: 750px) { .banner__media { height: -webkit-fill-available; } }
  • Users also tweaked logo image size in the theme customizer alongside CSS for better results. Back up code before editing.

Open items:

  • Another user’s logo remained too small despite similar CSS; a screenshot was provided (image central to their issue). No confirmed fix posted.
  • A question about compatibility with Online Store 2.0 (Theme 2.0) remained unanswered.

Status: Partially resolved (header height solution confirmed); some logo sizing and theme version questions are still open.

Summarized with AI on February 11. AI used: gpt-5.
10

@HSD1

Please add the following code at the bottom of your assets/base.css file.

@media screen and (min-width: 750px){
.banner__media {height: -webkit-fill-available !important;}
}