Dawn Header resize

Solved
Haggis4298
Excursionist
16 0 5

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. 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9800 2231 3068

This is an 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!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 10 (10)
dmwwebartisan
Shopify Partner
9800 2231 3068

@Haggis4298 

Please share store URL !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Haggis4298
Excursionist
16 0 5

Hi, @dmwwebartisan thanks for the reply. 

 

farbe.uk 

password1 

dmwwebartisan
Shopify Partner
9800 2231 3068

This is an 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!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Haggis4298
Excursionist
16 0 5

Worked perfectly first time, thanks so much. 

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

Thanks again. 

HAYDAWN
Shopify Expert
5 0 0

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
Excursionist
16 0 5

Hi @HAYDAWN 

 

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

 

 

HAYDAWN
Shopify Expert
5 0 0

Thank you very much

dmwwebartisan
Shopify Partner
9800 2231 3068

@HAYDAWN 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9800 2231 3068

@HAYDAWN 

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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →