Solved

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

glorygut
Excursionist
40 0 10

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.

Screen Shot 2021-11-19 at 6.32.17 PM.png

Accepted Solutions (2)
OpenThinking
Shopify Partner
321 81 121

This is an 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.

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

OpenThinking
Shopify Partner
321 81 121

This is an 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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

Replies 15 (15)

KetanKumar
Shopify Partner
36905 3641 11986

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
glorygut
Excursionist
40 0 10
glorygut
Excursionist
40 0 10

@KetanKumar 

 

Let me know if you need anything else from me 🙂

OpenThinking
Shopify Partner
321 81 121

This is an 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.

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
glorygut
Excursionist
40 0 10

@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
Shopify Partner
321 81 121

This is an 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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
glorygut
Excursionist
40 0 10

@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
Pathfinder
109 0 29

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
Excursionist
40 0 10

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
Pathfinder
109 0 29

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.

 

Screen Shot 2022-01-11 at 12.15.02 PM.png

OpenThinking
Shopify Partner
321 81 121

Hi,

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
tereza3
Visitor
3 0 0

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

 

Snímek obrazovky 2022-05-05 v 16.48.07.png

 

Thank you

Carolyn_Heaton
Visitor
1 0 1

Does the white space have text in it?

KetanKumar
Shopify Partner
36905 3641 11986

@Carolyn_Heaton 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
abgosav
Visitor
1 0 0

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