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

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

robbiezimm
Visitor
1 0 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. 

Reply 1 (1)

Small_Task_Help
Shopify Partner
830 27 75

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

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad