Product title is chopped off when I sue a sticky page header with sticky content on desktop

Shopify Discussion
1

I am using Dawn 15.1.0. I have a sticky header (set to Always, reduce logo size). On the default product page I have enabled sticky content. The expected behaviour is that the product title should remain visible (sticky) as I scroll. The product images will scroll but the content should remain sticky until the last image when it all should start to scroll.

What happens is that the product title starts to scroll until it becomes sticky but the top half of the title is no longer visible.

If I set the header to NOT be sticky then the product content behaves as expected when scrolling and correctly remains sticky with no product title missing.

1 Like
2

Hi,

Inspect overlapping styles using developer tools.
Adjust the CSS to create space between the sticky header and the product title.
Add ollowing CSS at the end of the file , CSS example

/* Adjust product title visibility with sticky header */
.sticky-header + .product-title {
    margin-top: 20px; /* Adjust as necessary */
    position: relative; /* Ensure it is positioned relative to avoid overlap */
    z-index: 10; /* Make sure it appears above other elements */
}

.sticky-header {
    z-index: 100; /* Ensure sticky header is above other elements */
}

Modify the HTML structure if necessary and Use JavaScript for Fine Control