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.

[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.

[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

[Carolyn_Heaton]

Does the white space have text in it?

[KetanKumar]

@Carolyn_Heaton 

can you please share more details please like store url and issue image please 

[abgosav]

Hey Guys, I tried your solution and it didnt work for my site. Can you please take a look? @KetanKumar @OpenThinking 

The problem I'm encountering is the presence of white space between the navigation bar and the first section of content, both on mobile and desktop views. I've been trying to create a seamless and smooth transition from the navigation bar to the content, but this white space is causing a visual disconnect.

Would greatly appreciate it if someone could point me in the right direction on how to remove this white space effectively.

Thank you in advance for your time and assistance.

The website link is novaterra.club