- This topic has 34 replies, 4 voices, and was last updated 2 years, 8 months ago by David.
-
AuthorPosts
-
September 28, 2020 at 2:26 pm #1462891TomLead DeveloperLead Developer
I’ll see if David has any CSS ideas.
September 29, 2020 at 1:27 am #1463284DavidStaffCustomer SupportInstead of using the transform:
transform: translateX(270px);
Try using theleft: 270px;
propertyTranslate is always relative to the elements current position.
September 29, 2020 at 1:57 am #1463320nik9Thanks guys!
Your support is amazing!!
It works far better with
left: 270px;
instead oftransform: translateX(270px);
.The only thing now is the animation speed…
I also had e discussion with the canvas plugin developer.
I mean that while the JavaScript from my plugin adds the ocs-sidebar-active class to the HTML element, the speed in which that actually happens is depending on the client (browser). So there is no way to rely on that class if you want to sync the animation.
The only way you could do that is by hooking into the JavaScript event and apply the same animation through JavaScript since it runs asynchronous.
Unfortunately I donβt have a better solution for this at the moment.
What would be the simplest solution together with GP?
September 29, 2020 at 2:04 am #1463328DavidStaffCustomer SupportOK so no Delay required and we need to remove any timing functions so it defaults to browser like so:
.ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) { left: 270px; transition-duration: 300ms; transition-timing-function: unset; }
September 29, 2020 at 3:28 am #1463453nik9Oh yeah.. This is exactly what I was looking for!
This is now working very very smooth! Thanks a lot guys! I very appreciate your patience, support and extra mile!
P.s: I always have such tricky questions. Is there a way that I can spend you guys a beer?
Cheers Nik
September 29, 2020 at 9:19 am #1464093TomLead DeveloperLead DeveloperAwesome, glad we could help!
Beer is always appreciated!: https://generatepress.com/ongoing-development/
Thank you! π
September 29, 2020 at 11:55 am #1464302nik9Sure! Payment done (1464299)
Thanks! π
September 30, 2020 at 9:41 am #1465660TomLead DeveloperLead DeveloperThank you! Very generous, we really appreciate it! π
May 10, 2021 at 5:05 am #1772465nik9Hello all,
We just noticed that our CSS does not work nice with the new GP version.
When we remove this CSS then it works the same as before starting this topic.It looks like, that the navigation and sticky navigation does not work work with that CSS and the new GP version.
Where there some changes in the navigation?
/* Canvas opens */ .ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) { left: 270px; transition-duration: 300ms; transition-timing-function: unset; } /* Canvas close */ @media screen and (max-width: 768px) { .main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) { transition-duration: 300ms; transition-timing-function: unset; } } /* push sticky product filter element to the right when canvas opens */ .ocs-sidebar-active .customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(270px); transition-duration: 300ms; transition-timing-function: unset; } /* push sticky product filter element back when canvas close */ .customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(0px); transition-duration: 300ms; transition-timing-function: unset; }
May 10, 2021 at 8:56 pm #1773488ElvinStaffCustomer SupportHi there,
There are no class changes done with the default theme sticky nav classes. It’s still the same nav#sticky-navigation and the rest of the classes
is_stuck navigation-stick navigation-clone sticky-navigation-transition
.Can you provide any screen capture of what’s occurring so we have an idea? Let us know.
May 10, 2021 at 11:38 pm #1773618nik9Hello Elvin,
Thanks. In the private notes you will finde 2 screencasts. There is some time between this two recordings. But, no plugin update change from the canvas sidebar plugin. I always test this function. And after the GP Update i noticed, that we have here a issue.
Thanks for your feedback
May 11, 2021 at 3:47 pm #1774991ElvinStaffCustomer SupportThat’s strange.
I’ve tried checking the site on Chrome Devtools and this doesn’t occur.
I’ve also tried checking on an actual phone (Chrome, Android), and this doesn’t happen as well.
What device are you using? Let us know.
May 17, 2021 at 10:35 am #1785503nik9Hello Elvin,
Hmm, I guess its because you testing on a computer. But on a smartphone it looks different.
However, I had to change the whole process of animation. The browser totally mess up with the off canvas when I shift them to the right. Now all works fine again except the close animation.The problem: When I close the off canvas, then the trigger for push navigation and sticky element back is not in line with the off canvas push back.
For that I use the following CSS…
/* Canvas close */ @media screen and (max-width: 768px) { .main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) { transition-duration: 300ms; transition-timing-function: unset; } } /* push sticky product filter element back when canvas close */ .customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(0px); transition-duration: 300ms; transition-timing-function: unset; }
Do you have a clue what I can try?
Cheers
May 19, 2021 at 9:05 am #1790045TomLead DeveloperLead DeveloperHi there,
Right now when I test your site I’m not seeing the push functionality at all, it’s just using the default overlay style.
Did you switch it up?
May 20, 2021 at 10:00 am #1791609nik9Hi tom, yes I change it to overlay to test it. Now its the back to push.
We have more than one problem…
1. If we close the canvas we landing always at the top of the page even when we scrolled down and open the panel.
2. Sometime we get a white space and then the whole header is messed up. Very strange
3. We move the header and sticky div to the right. All is fine for the open push. The animation is nice in line with the open animation from the canva. BUT the closing animation is very ugly. The header and sticky div (which is hooked in via GP elements) are pushed back but they need more time. And this is strange because we didn’t change something in the CSS. It was working well..hmm.. any idea why this is happening?
Cheers π
-
AuthorPosts
- You must be logged in to reply to this topic.