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
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024