Narrative Theme - How to get rid of Sticky/Fixed Add to Cart button

Carl_August
Tourist
20 0 1

Narrative Theme
By default, when scrolling the product page on a desktop, the 'add to cart button' remains fixed/sticky. Does anyone know how to stop it from being sticky?

Thank you in advance!

0 Likes

Hello ,
Add this code at the bottom of theme -> edit code -> assets -> theme.scss.liquid

.site-header.site-header--transparent.site-header--homepage {
	position: fixed;
	top: 0;
	width: 100%;
	-webkit-animation: slideDown 0.25s ease-out;
	animation: slideDown 0.25s ease-out;
	background: #000;
	opacity: .4;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Carl_August
Tourist
20 0 1

Thank you!

It didn't seem to do anything to the 'Add to Cart' button - but changed the opacity of the header.

Any idea?

0 Likes
davidkong0987
New Member
2 0 2

This is an imperfect solution but for now is ok. If anyone has a better solution, would love to know. 

.site-header {
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
}

.site-header--fixed {
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
}
everafterjew
Tourist
3 0 1

This solution helped me with my issue, thank you.

0 Likes