Header height setting

Store Design
,

Topic summary

A user seeks to reduce the vertical spacing (gap) in their store’s header while maintaining the logo size on Dawn theme version 15.2.0. The issue involves excessive space between the top panel and bottom bar.

Attempted Solution:
A community member provided CSS code to add to base.css targeting header height and padding:

  • Adjusts .header__heading-logo height to 19vh
  • Removes padding from header link
  • Eliminates margin from inline menu

Current Status:
The CSS solution didn’t achieve the desired result. The user clarified they want to preserve logo dimensions while only reducing the gap spacing.

Latest Recommendation:
Crop the logo image file itself before uploading to eliminate whitespace, which should automatically reduce the header gap without requiring code modifications.

The discussion remains open as the user hasn’t confirmed whether the image cropping approach resolved the issue.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Snímek obrazovky 2025-02-17 v 19.56.43.png
Snímek obrazovky 2025-02-17 v 19.56.43.png3542×1818 295 KB

Dobrý den, mám dotaz jak zúžit hlavičku? Zkoušel jsem už skoro všechno.. Rád bych, aby mezi horním panelem a spodní lištou nebylo tolik protoru, díky za odpovědi, Motiv Verze Dawn 15.2.0
2

Hi @jan_v_1 ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

https://anderewelt.cz/?_ab=0&_fd=0&_sc=1

4

Hi @jan_v_1 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (min-width: 769px){
.header__heading-logo {
    height: 19vh !important;
    max-width: 100%;
}

a.header__heading-link.link.link--text.focus-inset {
    padding: 0px !important;
}

nav.header__inline-menu {
    margin: 0px !important;
}
}
5 
All I can find is base.css and finally I put in the code you provided

but I can't seem to make the header smaller

 

Snímek obrazovky 2025-02-17 v 20.47.45.png
Snímek obrazovky 2025-02-17 v 20.47.45.png3544×1808 482 KB

6

CodingFifty_0-1739821879664.png
CodingFifty_0-1739821879664.png1245×638 147 KB

7

Go to Online Store, then Theme, and select Edit Code.
Search for header.liquid file Add the provided code at the end of the file.
8 
I'm just solving that I want to keep the size of the logo and I just want to reduce the gap

 
9

If you crop the logo image before uploading, the gap will be fixed.