[Support request] Move sticky add to cart

[Pedro]

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!

[David]

Hi there,

try this CSS:

@media (max-width: 768px) {
    .add-to-cart-panel {
        bottom: auto;
        top: 0;
    }
}

[Pedro]

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)

[David]

Add this CSS:

.add-to-cart-panel {
    pointer-events: none;
}

.add-to-cart-panel.show-sticky-add-to-cart {
    pointer-events: initial;
}

[Pedro]

Hello david! Add this last code along with the first one, or do I replace it?

What does add-to-cart-panel do?

[David]

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.

[Author]

Posts