[Resolved] Push sticky nav to right when canvas opens

Home Forums Support [Resolved] Push sticky nav to right when canvas opens

Home Forums Support Push sticky nav to right when canvas opens

Viewing 15 posts - 16 through 30 (of 35 total)
  • Author
    Posts
  • #1462891
    Tom
    Lead Developer
    Lead Developer

    I’ll see if David has any CSS ideas.

    #1463284
    David
    Staff
    Customer Support

    Instead of using the transform: transform: translateX(270px);
    Try using the left: 270px; property

    Translate is always relative to the elements current position.

    #1463320
    nik9

    Thanks guys!

    Your support is amazing!!

    It works far better with left: 270px; instead of transform: 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?

    #1463328
    David
    Staff
    Customer Support

    OK 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;
    }
    #1463453
    nik9

    Oh 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

    #1464093
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad we could help!

    Beer is always appreciated!: https://generatepress.com/ongoing-development/

    Thank you! πŸ™‚

    #1464302
    nik9

    Sure! Payment done (1464299)

    Thanks! 😎

    #1465660
    Tom
    Lead Developer
    Lead Developer

    Thank you! Very generous, we really appreciate it! πŸ™‚

    #1772465
    nik9

    Hello 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;
    }
    #1773488
    Elvin
    Staff
    Customer Support

    Hi 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.

    #1773618
    nik9

    Hello 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

    #1774991
    Elvin
    Staff
    Customer Support

    That’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.

    #1785503
    nik9

    Hello 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

    #1790045
    Tom
    Lead Developer
    Lead Developer

    Hi 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?

    #1791609
    nik9

    Hi 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 πŸ™‚

Viewing 15 posts - 16 through 30 (of 35 total)
  • You must be logged in to reply to this topic.