Solved

What is the process for resizing the Dawn theme header in Shopify?

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)
dmwwebartisan
Shopify Partner
12282 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 11 (11)

dmwwebartisan
Shopify Partner
12282 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Haggis4298
Excursionist
16 0 5

Hi, @dmwwebartisan thanks for the reply. 

 

farbe.uk 

password1 

dmwwebartisan
Shopify Partner
12282 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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. 

HSD1
Shopify Expert
15 0 2

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?

HDS
Haggis4298
Excursionist
16 0 5

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
Shopify Expert
15 0 2

Thank you very much

HDS
dmwwebartisan
Shopify Partner
12282 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12282 2546 3694

@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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Barbora_gN
Visitor
1 0 1

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! 

 

Screenshot 2021-10-11 at 19.02.32.png

 

LittleGoddess
Tourist
8 0 2

Hi 🙂

Will this also work for theme 2.0?

Thanks