FROM CACHE - en_header

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

Solved
glorygut
Excursionist
35 0 7

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
317 77 113

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
317 77 113

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 12 (12)
KetanKumar
Shopify Partner
34396 3444 11271

@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
35 0 7
glorygut
Excursionist
35 0 7

@KetanKumar 

 

Let me know if you need anything else from me 🙂

OpenThinking
Shopify Partner
317 77 113

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
35 0 7

@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
317 77 113

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
35 0 7

@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
Explorer
77 0 24

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
35 0 7

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
Explorer
77 0 24

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
317 77 113

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
New Member
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