All things Shopify and commerce
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.
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
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025