[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
  • #1443626


    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.

    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


    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.


    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.


    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?


    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.