[Resolved] Continue shopping banner after add to cart is overlaps the header

Home Forums Support Continue shopping banner after add to cart is overlaps the header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1443626
    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/

    #1443881
    David
    Staff
    Customer Support

    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

    #1444753
    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

    #1445268
    David
    Staff
    Customer Support

    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.

    #1446139
    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

    #1446400
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.