Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
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!
Please share store URL !
Thanks!
This is an accepted solution.
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!
Worked perfectly first time, thanks so much.
It's real difficult getting to grips with Dawn, for sure.
Thanks again.
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?
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;}
}
Thank you very much
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!
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;}
}
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!
Hi 🙂
Will this also work for theme 2.0?
Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024