Decrease padding above header image on home page only (!) Brooklyn theme

[Emelie]

Hey!

I am launching my webbshop in about 24h and one thing is bothering me… I would like to decrease the padding above header image on home page only (!) (it looks like how I want it on the other pages). It is a white padding right now which makes the navigation bar light grey. I want the navigation bar to start where the image starts. I attach two screenshots to show how it looks like now and how I want it to look. (PS. the navigation bar is sticky).

On this picture we can see how the navigation bar looks grey since there is a white padding above the banner image.

This is how I want it to look when landing on my webbshop. In this picture I have scrolled down i bit so that the navigation bar starts where the banner image starts.

Best regards,
Emelie

[Elias]

Hey, @Emelie .

Thank you for reaching out!

I understand you’re looking to decrease the padding above the header on the homepage. Based on the screenshots you’ve provided, I can’t confirm whether this is possible. However, since you’re using a Shopify-supported theme, then this is something that our Theme Support team can look into for you. If your store is subscribed to plan, then you’re eligible to use the complimentary design time included with your subscription on customizing your theme. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

I’d love to know if this is something that our Theme Support can help you with. Keep me posted!

[diego_ezfy]

@Emelie , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

@media (min-width: 992px){
    .template-index .main-content [id*='shopify-section']:nth-child(1){
    position: relative;
    top: -70px;
}
}

This is a quick fix but should do the job. Ideally it should be done via javascript to calculate the height of the header dynamically, this would require more complex work.

It’s worth bearing in mind that your website’s navbar is broken on tablets/small laptops as well:

Kind regards,
Diego

[Emelie]

@diego_ezfy Thank you so much, it works!

But oh no I thought I fixed that problem a few days ago with the broken navbar… On the screens I have tried it does not look like that, but I don´t have access to all kinds of screens so that was a very good input you gave me!

Do you also know how I can fix that broken nav bar?

[diego_ezfy]

@Emelie

You’re welcome. Following the previous steps and adding this CSS should fix the broken navbar on tablets:

@media (max-width: 992px){
    .header-wrapper {
    top: 0;
}
}

Kind regards,
Diego

[Emelie]

@diego_ezfy Thank you!

I can see that after I added your first code the padding below header image is now very big instead (see screenshots for comparison). Do you have an idea how to decrease that as well?