How To Decrease The Height Of The Site Header In Dawn Theme

Store Design
, , ,

Topic summary

Goal: reduce the header height in the Shopify Dawn theme.

Key steps and suggestions:

  • Store URL was requested and shared for context: https://soakyskincare.com/.
  • Option 1: crop the logo image to reduce the visual height of the header (an image was shared to illustrate this approach).
  • Option 2: add a CSS tweak to shift the menu upward. Instructions: Online Store → Theme → Edit code → Assets → base.css → append:
    .header:not(.header–middle-left) .header__inline-menu { margin-top: -20px !important; }

Technical note:

  • CSS (Cascading Style Sheets) controls the site’s layout; margin-top: -20px moves the inline menu up, decreasing perceived header height. base.css is the main stylesheet in the theme’s Assets.

Outcome:

  • The CSS solution was confirmed to work by the original poster.

Status:

  • Resolved. No remaining questions; logo cropping remains an optional alternative.
Summarized with AI on January 18. AI used: gpt-5.
1

can someone tell me how To Decrease The Height Of The Site Header In Dawn Theme?

2

Hi @hala99

Can you please share store URL?

3

sure

https://soakyskincare.com/

4

@hala99

You have crop the logo image,

Then it will be resolved

laddisahsi_0-1695038365577.png
laddisahsi_0-1695038365577.png1439×820 91.7 KB

1 Like
5

Hello @hala99

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header:not(.header--middle-left) .header__inline-menu {
    margin-top: -20px !important;
}
1 Like
6

thank you! it worked

7

thank you!

1 Like