Shopify Dawn - Header: Remove White Space / Margins

Solved

Shopify Dawn - Header: Remove White Space / Margins

tigas31
Excursionist
57 0 9

Hi,

I want to reduce the white space between my logo and the menu, at the the header section.

 

tigas31_0-1677418312836.png

 

Any idea how to do it?

Accepted Solutions (3)
PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:

@media screen and (min-width: 990px) {
    .header__heading-logo {
        max-height: 100px !important;
        object-fit: cover !important;
        width: 100% !important;
        width: 300px !important;
        max-width: 100% !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

 I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

 

 

 

 

@media screen and (min-width: 750px) {
    .footer {
        padding-top: 10px !important;
    }
    .footer__content-top {
        padding-bottom: 20px;
    }
    .footer__content-bottom {
        padding-top: 0;
    }
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 55%;
    }
    .product-media-container.constrain-height.media-fit-contain {
        width: 100%;
    }
    .product--large:not(.product--no-media) .product__info-wrapper {
        max-width: 45%;
    }
    .product__title h1 {
        font-size: 3.5rem;
    }
}

 

 

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

You can try below code in section-footer.css file:

@media screen and (min-width: 750px) {
    .footer {
        margin-top: 60px !important;
    }
    .footer__copyright {
        margin-top: 10px !important;
    }
}

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 9 (9)

Mike-Consentik
Shopify Partner
195 30 37

Hi @tigas31 

This is Mike from Omega

 

You can try this solution:

1. Open Theme -> Edit code

2. Open Assets/base.css and paste this code to the bottom of file:

 

@media screen and (min-width: 990px){
.header:not(.header--middle-left) .header__inline-menu {
    margin-top: -10px;
}
}

 

You can change the number of pixel to suitable to your store, a negative number is acceptable.

 

Hope my answer will help you.

Mike from Omega

 

If you find this helpful, please give it a like or mark it as a solution.
Consentik GDPR Cookie Banner: Effortlessly stay in compliance with EU GDPR and CCPA with Google Consent Mode V2. Free plan available and 24/7 Support
tigas31
Excursionist
57 0 9

Hi @Mike-Consentik ,

 

I pasted the code but nothing happened. Please notice that I've added my logo and then adjusted the desktop logo width to make the logo bigger, but I'm afraid this might be the reason behind my problem:

 

tigas31_0-1677437200610.png

 

I've also noticed that this area around the logo is clickable, which means that it's not empty, it's part of the logo and redirects me to the homepage if I click in it, but I've uploaded a logo without background, so I don't understand why this is happening.

 

tigas31_1-1677437366265.png

 

PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:

@media screen and (min-width: 990px) {
    .header__heading-logo {
        max-height: 100px !important;
        object-fit: cover !important;
        width: 100% !important;
        width: 300px !important;
        max-width: 100% !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

tigas31
Excursionist
57 0 9

Hi @PageFly-Richard ,

I pasted it but nothing happens.

 

tigas31_0-1677507868105.png

 

 

 

PageFly-Richard
Shopify Partner
4874 1096 1775

Hi @tigas31 ,

 

You can share your store URL and if your store is password protected then please provide password too. Can I test it for you?

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

tigas31
Excursionist
57 0 9

@PageFly-Richard it worked!! The page was still reloading. Thank you!

 

By the way, can I do the same with the footer? Currently it occupies half of my screen, so I also want to reduce it

tigas31_0-1677508621321.png

 

PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

 I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

 

 

 

 

@media screen and (min-width: 750px) {
    .footer {
        padding-top: 10px !important;
    }
    .footer__content-top {
        padding-bottom: 20px;
    }
    .footer__content-bottom {
        padding-top: 0;
    }
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 55%;
    }
    .product-media-container.constrain-height.media-fit-contain {
        width: 100%;
    }
    .product--large:not(.product--no-media) .product__info-wrapper {
        max-width: 45%;
    }
    .product__title h1 {
        font-size: 3.5rem;
    }
}

 

 

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

tigas31
Excursionist
57 0 9

@PageFly-Richard Thanks!!

But still regarding the footer, it's not completely solved. What makes it looks so big it's that bar at the bottom "2023, neevra". Any way of reducing the size of this bar?

 

tigas31_0-1677511585664.png

 

PageFly-Richard
Shopify Partner
4874 1096 1775

This is an accepted solution.

Hi @tigas31 ,

 

You can try below code in section-footer.css file:

@media screen and (min-width: 750px) {
    .footer {
        margin-top: 60px !important;
    }
    .footer__copyright {
        margin-top: 10px !important;
    }
}

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.