Archived topic
Move sticky add to cart
5 replies · Started by Pedro on November 28, 2019
Hello! I have added a chat to my site that is located in the lower right.
So I would like the "Sticky Add to Cart" on product page to be displayed at the top (ONLY FOR MOBILE VERSION)
Can you help me?
Thank you!
Hi there,
try this CSS:
@media (max-width: 768px) {
.add-to-cart-panel {
bottom: auto;
top: 0;
}
}Hello david! Thanks for answering.
The code worked, however it causes a problem.
The site logo stops working, as does the menu.
(Unable to click)
Add this CSS:
.add-to-cart-panel {
pointer-events: none;
}
.add-to-cart-panel.show-sticky-add-to-cart {
pointer-events: initial;
}Hello david! Add this last code along with the first one, or do I replace it?
What does add-to-cart-panel do?
You would add both pieces of code.
add-to-cart-panel is the main CSS class for the Add to cart panel element.
The show-sticky-add-to-cart gets added to that element when the page is scrolled past the 'buy' button.
That CSS simply says switch off the pointer events ( so it won't be detected by mouse or touch ) unless it is visible.
