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

Highlighted
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
Highlighted

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;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
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
Highlighted
New Member
2 0 1

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;
}
1 Like
Highlighted
Tourist
3 0 1

This solution helped me with my issue, thank you.

0 Likes