Remove White Space Between Top Section and Header/Navigation Bar Dawn Theme

[glorygut]

I have white space between my header and the top section on my homepage. How do I get rid of it for my homepage only? I am using the new Dawn theme.

[KetanKumar]

@glorygut 

Sorry you are facing this issue, it would be my pleasure to help you.

Please share your site URL,
I will check out the issue and provide you a solution here.

[glorygut]

https://xkc62uj2gwfl07sp-42777936028.shopifypreview.com

Sorry for the late reply!

[glorygut]

@KetanKumar 

Let me know if you need anything else from me 🙂

[OpenThinking · Accepted solution]

Hi there,
Jack from OpenThinking here!

Copy/Paste the following code inside your layout/theme.liquid, just before </head>

<style>:is(.spaced-section) { margin-top:0!important } @media screen and (min-width: 750px) { :is(.spaced-section) { margin-top:0!important }}</style>

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

[glorygut]

@OpenThinking 

Works perfectly on desktop and mobile for the homepage, thank you. Is there a way to only apply this to the homepage only, opposed to all pages?

[OpenThinking · Accepted solution]

Yes,

to display the CSS only on the home page, wrap your code inside `{%- if template == 'index' -%}`

like so:

{%- if template == 'index' -%}
<style>:is(.spaced-section) { margin-top:0!important } @media screen and (min-width: 750px) { :is(.spaced-section) { margin-top:0!important }}</style>
{%- endif -%}

cheers

[glorygut]

@OpenThinking 

Thank you so much for being so quick. Works!

If you have a free moment, would you mind also checking this quesiton I had? https://community.shopify.com/c/shopify-design/prevent-header-from-collapsing/m-p/1395911#M367468

[mjdubarr]

This code works great! Thank you. 

On my end though, is there a way to have this code only for desktop and not mobile?

[glorygut]

Try this, it is @OpenThinking's solution just with a higher min-width.

Copy/Paste the following code inside your layout/theme.liquid, just before </head>

<style>:is(.spaced-section) { margin-top:0!important } @media screen and (min-width: 992px) { :is(.spaced-section) { margin-top:0!important }}</style>

[mjdubarr]

I adjusted one thing to leave the white top for mobile. However, I noticed on the other tabs, the banner images cut off the header. its weird.

I tried this code to reverse my edits back to the original settings in case my edits affect the look of my design in other peoples devices. I am unsure. But it seems I may have to leave what I did alone for now.

[OpenThinking]

Hi,

please provide your store URL so I can check and assist you.

[tereza3]

Hi, I have same problem, I need to remove the space between my header menu and blog posts. Can you please help me? I tried your solution but it doesn`t work 😞

my url is: www.litinac.cz

Example of blog post:

https://litinac.cz/blogs/news/co-jste-o-nevedeli-o-nadobi-z-litiny-a-co-jde-uvarit-v-tom-nasem

Thank you