- This topic has 30 replies, 3 voices, and was last updated 3 months ago by
David.
-
AuthorPosts
-
August 17, 2020 at 10:44 pm #1407154
nik9
Hello GP Team,
We have some questions regarding Display add to cart panel on scroll.
1.) We want to adjust the slide-in from the Display add to cart panel on scroll on Desktop. In Niche default, the Display add to cart panel on scroll does not look nice together with the sticky navigation. When the Display add to cart panel on scroll slides in, it overlaps some time the sticky navigation. It would be nice if the Display add to cart panel on scroll would slide in from the sticky navigation bottom instead from the page top.
Is something like this possible with css?
2.) On Mobile the add to cart panel on scroll does overlaps the header navigation. By default the add to cart panel on scroll is at the bottom. So we want this at the top under the navigation. For this we use this css:
@media (max-width: 768px) { .add-to-cart-panel { bottom: auto; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } }
How how can we this adjust that the mobile header will be shown?
Thanks & Cheers! π
August 18, 2020 at 3:55 am #1407454David
StaffCustomer SupportHi there,
its not possible to change where the transform position occurs as the sticky add to cart has to start off screen, it then calculates the height of the header to work out where to move to.
But you could try this CSS:
.add-to-cart-panel { transition: opacity .5s ease-in-out !important; }
Then the panel will just fade in below the header.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 18, 2020 at 4:17 am #1407475nik9
Hi David,
Cool! It work as wanted. But only the fade in works. The fade out is not like a “fade out” its more a instantaneous disappearance. How do I have to adjust the fade out CSS?
August 18, 2020 at 5:15 am #1407555David
StaffCustomer SupportNope – don’t think its possible – i tried a few methods to ‘delay’ the outgoing transition – but they all failed lol
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 18, 2020 at 6:11 am #1407628nik9
Hey Dave
Haha lol. Maybe Tom has a idea for this?
Cheers
August 18, 2020 at 6:39 am #1407672David
StaffCustomer SupportI’ll ask him π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 18, 2020 at 9:47 am #1408080nik9
Yejj, Thanks π
August 18, 2020 at 10:18 am #1408126Tom
Lead DeveloperLead DeveloperTricky one..
I fixed the fade out with this CSS:
.add-to-cart-panel { transform: translateY(65px); }
Problem there is the element sits under the header with no opacity, but you can still click on things.
There isn’t a class that is added/removed when it displays/hide, which would allow us to fix that.
I’ve made a note to get a class added dynamically in GPP 1.12.0.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 18, 2020 at 10:51 am #1408163nik9
Perfect! Thank you so much! π
P.s: Do we have to change something after you would implement the class or is everything fine?
Cheers
August 18, 2020 at 12:58 pm #1408331Tom
Lead DeveloperLead DeveloperShouldn’t have to. Careful with the CSS I wrote above though, the element always exists below the header and can be interacted with even though it’s not visible.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 19, 2020 at 12:59 am #1408957nik9
Thanks π
August 19, 2020 at 5:56 am #1409324nik9
Hi Tom,
Now I found the first problem. The sub pages from the Navigation node “Partner” can’t not be selected. Hover on “Parter” will show the child navigation nodes. But they disappear when we try to select one of them. π
We use this css here, it works well except this navigation error…
.add-to-cart-panel { transition: opacity .5s ease-in-out !important; } .add-to-cart-panel { transform: translateY(85px); } @media (max-width: 767px) { .add-to-cart-panel { margin-top: 56px } } @media (max-width: 768px) { .add-to-cart-panel { bottom: auto; top: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); transform: translateY(56px); } }
August 19, 2020 at 8:43 am #1409760nik9
Update:
I have to remove your code Tom. The side effects are to high.
Is there a other option to get this to work without sideeffects?.add-to-cart-panel { transform: translateY(85px); }
August 19, 2020 at 8:55 am #1409790Tom
Lead DeveloperLead DeveloperNot at this time, unfortunately. We’ll need to modify to javascript to allow for more effects.
I’ll make sure this is added to 1.12 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 19, 2020 at 9:03 am #1409815nik9
Okei. Cool thanks.
When will 1.12 available? π
Cheers
-
AuthorPosts
- You must be logged in to reply to this topic.