Continue shopping banner after add to cart is overlaps the header

[nik9]

Hello,

We use the Niche theme.

I noticed, that the continue shopping banner after add to cart overlaps the header. This is strange because when we are scrolling down and the sticky header kicks in, then the “Continue shopping” banner is underneath the sticky header.

On mobile and tablet it is always right.

But if I just change the margin-top from “add-to-cart-panel item-added” to 80px (because the header is 80px hight) then I also have 80x when the sticky header is available.

How can I change this, that the “Continue shopping” banner is always underneath the header?

On your GP Site library.. the Niche example theme has the exact same behavior.
https://generatepress.com/site-library/

[David]

Hi there,

i am not sure i fully understand – i went to our Niche demo site, visited the Shop page, scrolled down so the sticky nav kicked in, then added an item to the Cart:

Let me know what i am missing

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

Hi david

Yes. This works! But try again the same without scrolling down. If you add a item to cart when the page is at the top, then the banner will overlap the header.

Cheers

[David]

That is the actual intended behaviour of the Added to Cart panel.

It’s top position is only adjusted if the Admin bar or the Sticky Nav is present. And there is no simple CSS method of fixing that and the JS used to place it is currently unfilterable.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

Hi David

Thanks. Got it.

The thing is, that our header height is higher than the banner. So the bottom of thr header is always the visible, which look ugly. Increasing the banner height or decreasing the header height is also not a good option.

Did you see any other option for this UX issue?

Cheers

[Tom]

You could do something like this:

.add-to-cart-panel.item-added, .add-to-cart-panel.show-sticky-add-to-cart {
    transform: translateY(100px) !important;
}

Just adjust the 100px to the height of your header.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts