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

[Haggis4298]

Hi all, 

Firstly, thank the Lord that FINALLY Shopify implemented sections on all pages instead of just the homepage. 

It makes everyone's life much, much easier so thanks for that. 

That being said, I'm trying to reduce the height of the header in the Dawn theme and have tried endlessly to find the section in theme.liquid and header.liquid - I've tried various options but no code I use (that works on other themes I've used) seems to work. 

I'm trying to find the default header height and reduce it. 
Any suggestions? 

Cheers. 

[dmwwebartisan]

@Haggis4298 

Please share store URL !

Thanks!

[Haggis4298]

Hi, @dmwwebartisan thanks for the reply. 

farbe.uk 

password1 

[dmwwebartisan · Accepted solution]

@Haggis4298 

 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;}
}

Thanks!

[Haggis4298]

Worked perfectly first time, thanks so much. 

It's real difficult getting to grips with Dawn, for sure.

Thanks again. 

[HSD1]

Hi There

Thank you so much for this solution. I've been trying myself also.

Is there a way to reduce the height even further so the banner is shorter rather than filling up the screen?

[Haggis4298]

Hi @HSD1 

What I did was change the variables around until I got what I was looking for, example, this is the code that I ended up using that I felt fit my header perfectly. 
I changed ".header__heading-logo {width: 40% !important;}" to 80%

I messed around with the last line turning "0rem" to "-20rem" and it did make some changes but ultimately I put it back to 0. 

Additionally I selected a different sized logo and changed the logo size in the "customize" editor. 

It's just a case of playing around with the values and variables and seeing what you like best. 

I'm by no means an expert on this by the way so make sure you make a back up of the code your editing or at least make a note of which lines its on so you can revert back. 
Also, I'm sure @dmwwebartisan will be able to give you neater more "correct" way of doing it but this is what worked for me. 🙂 

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

[HSD1]

Thank you very much

[dmwwebartisan]

@HSD1 

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

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

Thanks!

[dmwwebartisan]

@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;}
}

[Barbora_gN]

Hello,

I am also having a similar problem, no matter what I do, seems I can't get my logo to a desired size.. I have tried to paste the same code & play around with the numbers, but its still looking small. 

You can see the issue below, obviously the logo should be much bigger! Does anyone know how to fix this issue? Thanks! 

[LittleGoddess]

Hi 🙂

Will this also work for theme 2.0?

Thanks