- This topic has 5 replies, 3 voices, and was last updated 5 months, 2 weeks ago by
Tom.
-
AuthorPosts
-
September 15, 2020 at 12:29 am #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/September 15, 2020 at 4:17 am #1443881David
StaffCustomer SupportHi 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/September 15, 2020 at 12:45 pm #1444753nik9
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
September 16, 2020 at 1:37 am #1445268David
StaffCustomer SupportThat 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/September 16, 2020 at 10:26 am #1446139nik9
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
September 16, 2020 at 2:54 pm #1446400Tom
Lead DeveloperLead DeveloperYou 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 -
AuthorPosts
- You must be logged in to reply to this topic.