Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Dawn Theme: How to Remove the padding in Header

Solved

Dawn Theme: How to Remove the padding in Header

almapiedra
Tourist
13 0 6

I'm working on my website and noticed that the header is too thick...there is a lot of top/bottom whitespace padding. How do I remove that?

Accepted Solution (1)
Akibhusen
Shopify Partner
715 121 148

This is an accepted solution.

@almapiedra,

 

Please add the below CSS code to at the end of your base.css file.

 

@media(min-width:990px){
body .header{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}

View solution in original post

Replies 14 (14)

Akibhusen
Shopify Partner
715 121 148

Can you please share your store URL? so I can assist you well.

Akibhusen
Shopify Partner
715 121 148

This is an accepted solution.

@almapiedra,

 

Please add the below CSS code to at the end of your base.css file.

 

@media(min-width:990px){
body .header{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
almapiedra
Tourist
13 0 6

That looks better, Thank you so much! 

Akibhusen
Shopify Partner
715 121 148

@almapiedra If you got the solution then you can make this thread an accepted solution. so, others get to know that there is no need to add comments for this thread. 

Sweets-n-Things
New Member
8 0 0

this didnt work for me completely, i managed to reduce the top-padding but reducing the bottom one just made it conflict with the sticky-header


this is already present in line 1888 of the base.css file

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

Akibhusen
Shopify Partner
715 121 148

@Sweets-n-Things, can you please share your store URL?

also, let me know what is the issue you are facing in your store.

ThreeFive
Visitor
2 0 0

Hello,

I am wanting to remove padding to the left and right of the header but am having no luck 

Akibhusen
Shopify Partner
715 121 148

@ThreeFive,

 

can you please share the URL of your store?

heather0508
New Member
7 0 0

Thanks for the coding to move the top padding down. For some reason mine only worked on the desktop version. Is there coding to make it work on mobile too? I'm just in trial mode at the mo but the url is oakandporter.co.uk. Thanks 🙂

Akibhusen
Shopify Partner
715 121 148

Can you please share the password of your store so I can check the front end and let you know where to update the CSS to get the required change?

JaredSHill
Visitor
2 0 0

Were you able to get it to work on mobile? I have the same issue.

Akibhusen
Shopify Partner
715 121 148

@JaredSHill,

 

Can you please share share your store URL and the screenshot where you want to reduce the space?

Sweets-n-Things
New Member
8 0 0

Thanks,
https://jellytoys.com
I was looking to reduce the padding above and below the logo slightly, as the top bar is too wide! is that possible? many thanks for your support

Akibhusen
Shopify Partner
715 121 148

@Sweets-n-Things,

 

Can you please add the below CSS at the end of the base.css file? I hope this will work fine for you.

 

body .header__heading-link{
padding:0;
}