Solved

Product image goes behind sticky menu - Refresh theme

ekonshin
Visitor
2 0 0

Hello!

 

Tried to search but didn't find a similar issue. I have a shop on Refresh theme (whiskygrail.com). The sticky menu is activated and the logo is minimized on scrolling. My problem is that on the product page, the image goes behind the sticky menu during the scrolling. How can I fix that the image sticks right under the menu?

 

ekonshin_0-1707398809907.png

 

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @ekonshin,

 

Ok sorry I understand now 😊. If you want it to remain completely visible during half scroll like below, then follow the instructions after the image 

ThePrimeWeb_1-1707399247125.png

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 750px) {
    .product__column-sticky {
        top: 20rem !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_2-1707399337133.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1794 507 373

Hey @ekonshin,

 

Sorry I don't understand. A sticky menu is always infront of everything. 

This is how I currently see it. If you scroll down, of course the product details are going to go behind the header.

ThePrimeWeb_0-1707399074422.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @ekonshin,

 

Ok sorry I understand now 😊. If you want it to remain completely visible during half scroll like below, then follow the instructions after the image 

ThePrimeWeb_1-1707399247125.png

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 750px) {
    .product__column-sticky {
        top: 20rem !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_2-1707399337133.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ekonshin
Visitor
2 0 0

Works perfectly, thank you!