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

Solved
glorygut
Excursionist
23 0 2

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)

Accepted Solutions
OpenThinking
Shopify Partner
280 64 83

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
280 64 83

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 7 (7)
KetanKumar
Shopify Partner
24919 2496 9027

@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
23 0 2

@KetanKumar 

 

Let me know if you need anything else from me

OpenThinking
Shopify Partner
280 64 83

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

glorygut
Excursionist
23 0 2

@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
280 64 83

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

glorygut
Excursionist
23 0 2

@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