How to keep the margin between product image and header menu the same

[tjieko]

Hi,

Basically what is happening is that if I scroll on my product page the image is supposed to keep the same distance from the header while the title, description, price, etc. scrolls down. However, the image does not stay still for the first part of scrolling, causing the header menu to cover a part of it. I would like the margin between the product image and header menu to not change.

My URL is https://vouwfatbike.nl/

A product page example is https://vouwfatbike.nl/en/products/windgoo-e20 

Thanks!

[Henry_dev · Accepted solution]

Hi @tjieko You can use this code: 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        top: calc(var(--header-height) + 3rem) !important;
    }
}

[topnewyork]

Hi @tjieko , kindly use the below code:

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media screen and (min-width: 750px) {
    .product__column-sticky {
        top: calc(var(--header-height) + 3rem) !important;
    }
}
</stlye>

Results:

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!