Debut Theme - Parallax effect on homepage image.

[Kuaggas]

Hi!

I would like my website's homepage image to have the parallax effect, but unfortunately this theme doesn't give that option. 

Can anyone help me code this?

Website URL: https://kuaggas.myshopify.com

Password: leakre

Thank you so much for your time,

Daniel

[KetanKumar · Accepted solution]

Hello, @Kuaggas 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file

.hero {
background-attachment: fixed;
}

[Kuaggas]

It worked! Thank you so much 🙂

PS: Were you able to access my website here? https://community.shopify.com/c/Shopify-Design/Debut-theme-Need-to-make-product-images-appear-with-a...

Thanks again,

Daniel

[nckeng]

Thanks for this. It works great on desktop. However, isn't working correctly on mobile as the image looks zoomed in. It works fine when resizing the browser on desktop but when viewing on an actual mobile it's not right. How can I disable the Parallax effect for mobile and make the image responsive?

Any help much appreciated. 

[KetanKumar]

Hello, @nckeng 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[nckeng]

Hi KetanKumar, thanks for looking into this. I just sent you a message.

[KetanKumar]

Thanks for message

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file.

@media only screen and (max-width: 749px) {
.hero {
    background-attachment: scroll;
}
}

[nckeng]

Excellent! This sorted it. 

Much appreciated.

[Tddandridge]

Hi. Thanks for providing awesome value. The code you provided works flawlessly, but is there a way to actually keep the parallax on mobile and make the image show up like it does on desktop rather than appearing zoomed in? Thanks!

[KetanKumar]

Hello, @Tddandridge 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[f0w]

Hello 
it worked for me but only on desktop version

Mobile version still same Nothing changed what to do 

Please advice Thank you 🙂

[KetanKumar]

@f0w 

Thanks for post.

sorry mobile parallax doesn't properly work all device some device many issues  

[LaseMakers]

Hi @KetanKumar 

Thank you for your helping out with this code it did help out.

But I'm still having a problem with my mobile version, the menu option won't show correctly. 

Could you please help me with this? 

[KetanKumar]

@LaseMakers 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[LaseMakers]

Hi @KetanKumar 

The URL site is

https://aguaelemental.myshopify.com/

Password: faldau

Thank you so much for your help.

[KetanKumar]

@LaseMakers 

Thanks or URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.mobile-nav-wrapper {
z-index: 9;
    background: #fff;
}

[LaseMakers]

@KetanKumar super thanks!!!

It solved my problem 🙂

[KetanKumar]

@LaseMakers 

Thanks for your support and your compliments.

[LaseMakers]

Hi @KetanKumar 

For some reason when I added the code you send me (that worked great 👌)  when click at the first option of the drop down menu it sends you automatically to the home page, I have deleted and added again on navigation but it wont work, also I think that by trying to fix it something happened to the drop down menu, because it wont work.

Can you please help, I don't know what to do. 

This is the coding I have added to my Debut theme:

.hero {
background-attachment: fixed;
}

.site-header {
position: absolute;
background-color: transparent;
}

.site-header {
position: absolute;
background-color: transparent;
}

@media only screen and (max-width: 749px) {
.hero {
background-attachment: scroll;
}
}

.mobile-nav-wrapper {
z-index: 9;
background: #fff;
}

.grid {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;
text-align: center;

@include media-query($small) {
margin-left: -$grid-gutter-mobile;
}
}

.price {
display: block;
text-align: center;
}

[KetanKumar]

Hello, @LaseMakers 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?