Space between navigation and hero image (Debut Theme)

Solved
New Member
5 0 0

Hello, I’m using the Debut theme and I’ve been messing around with this for hours, but how can I make my hero image go at least up to my navigation bar? There has always been a gap there, and I can’t seem to get rid of it entirely. I also just added the code for a sticky navigation bar, but I’m pretty sure I was having this spacing issue before I added it… It’s just more noticeable now that I have a visible border at the bottom of my navigation bar.

https://invisiblecityeditions.com/

And I know a lot of people asked this on the sticky navigation thread, but I still didn't see a solution to that little jump in space that happens when you first load the page. Any solutions?

Thanks.

0 Likes
Shopify Expert
467 49 51

Hello There,

1. Go to Online Store->Theme->Edit code
2. assets->assets/theme.scss.liquid->paste below code in the bottom of the file

@media only screen and (min-width: 750px)
.main-content {
padding-top: 34px!important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
New Member
5 0 0

Hmm no that's definitely not it...

Screen Shot 2020-12-02 at 4.17.06 AM.png

I even tried removing the sticky navigation code and then trying it, but it gave me the same result...

0 Likes
Shopify Expert
467 49 51

Hello There,

1. Go to Online Store->Theme->Edit code
2. assets->assets/theme.scss.liquid->paste below code in the bottom of the file

@media only screen and (min-width: 750px){
.main-content {
padding-top: 34px!important;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
New Member
5 0 0

This one works, but is there a way to only apply it to the homepage? My other pages do not have hero images and now the navigation bar is cutting into my headings.

0 Likes
Shopify Expert
467 49 51

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. assets->assets/theme.scss.liquid->paste below code in the bottom of the file

Remove old code
@media only screen and (min-width: 750px){
.main-content {
padding-top: 34px !important;
}
}

Add this one

@media only screen and (min-width: 750px){
.template-index .main-content {
padding-top: 34px !important;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes