[Resolved] Push sticky nav to right when canvas opens

Home Forums Support Push sticky nav to right when canvas opens

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1457705
    nik9

    Hello,

    I noticed that I have a strange sticky header behavior when I open a off canvas. For better understanding, you will find a video in private information.

    When the normal header is shown and i open the canvas, is everything working fine. But when I scroll on the page and open the canvas, then the sticky header has not the same behavior as the normal header.

    No scroll: https://ibb.co/V3sQ4bY

    With scroll: https://ibb.co/R0pB8Yw

    I guess this is coming from javascript. Can I somehow adjust the sticky header that this work the same way as the normal header?

    Cheers

    #1458111
    David
    Staff
    Customer Support

    Hi there,

    be default the Off Canvas Panel overlays the content – not push it to one side – so which custom CSS did you add to make it behave that way?

    #1458140
    nik9

    Hi David,

    I use the off canvas plugin (https://de.wordpress.org/plugins/off-canvas-sidebars/) for this. In a earlier post Tom told me that I maybe can work with them to get what I want. Now this is working like very well.

    Only that little UI issue is now here.. But this problem only regards to the sticky header.. the normal GP header works perfectly.

    Cheers

    #1458216
    David
    Staff
    Customer Support

    I am not sure thats possible to resolve.
    The GP Sticky nav uses fixed positioning which is relative to the viewport.

    Where can i see this, ill take a look if anything can be done.

    #1458380
    nik9

    Hello David

    Site info is in Private note available. You have to use the mobile view port and click on “Produkte Filtern”. I guess we have to adjust the javascript in order that the sticky navbar would also pushed to the right.

    cheers

    #1458466
    David
    Staff
    Customer Support

    You can adjust the sticky navs left position when the OCS Sidebar is active:

    .ocs-sidebar-active .navigation-stick:not(.gen-sidebar-nav) {
        left: 270px;
    }

    Might want to play with some CSS transition to make is slide as opposed to jump.

    #1458797
    nik9

    Hello David,

    Yep, Now i’m playing with this settings here. But it is not perfect. Is there maybe another CSS trick to make this more smooth?

    .ocs-sidebar-active .navigation-stick:not(.gen-sidebar-nav) {
    	transform: translateX(270px);
    	transition-duration: 0.36s;
    }

    Also, I need also a make sure that the transformation back is smooth. Currently the sticky nav jumps back. But I have no idea which CSS class I have to us for this. Something with the “.ocs-sidebar-active” but inactive slide back or something.

    #1459140
    David
    Staff
    Customer Support

    You need to set the starting point transform ie. when the OCS sidebar is not optn the translate should be 0 ie.

    :not(.ocs-sidebar-active) .navigation-stick:not(.gen-sidebar-nav) {
        transform: translateX(0);
        transition-duration: 0.36s;
    }
    #1459636
    nik9

    Hmm. But when I use this, the first CSS (push left:270px) is not executed and the sticky header stays. This is a tricky one 😂

    #1460283
    Tom
    Lead Developer
    Lead Developer

    Try changing your CSS to this:

    .main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
        transform: translateX(0px);
        transition-duration: 0.37s;
    }
    
    .ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
        transform: translateX(270px);
        transition-duration: 0.37s;
    }
    #1460713
    nik9

    Hi Tom, oh yeah.. this is working smooth. But not perfect. But I guess I have to play with the animation speed and also with transition-timing-function.

    This is the currents status:

    /* Canvas opens */
    .ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
        transform: translateX(270px);
        transition-duration: 300ms;
        transition-timing-function: ease-in-out;
        transition-delay: 5ms;
    }
    
    /* Canvas close */
    .main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
        transform: translateX(0px);
        transition-duration: 200ms;
       transition-timing-function: linear;
    }

    I’m trying to find out what settings the other plugin developer used for the animation. But I do not find any setting via developer tools and also nothing the the plugin folder. But this should be there somewhere right?

    Last thing:
    Now the sticky header look almost perfect (need some transition adjustment as mentioned above) but this should be a little thing. But now i just noticed a other UI issue. When the Canvas is already active, and the user scrolls around in the html content, then the CSS is always fired therefore the sticky header and the default header are pushed to right and back. (See video in private info)

    Is it somehow possible with CSS to keep the header on always left:270 when the canvas is already active in order that this is not jumping around? Or do i need for the javascript?

    #1461294
    Tom
    Lead Developer
    Lead Developer

    Hmm, that’s just the transition firing.

    You could try to disable scrolling when it’s open:

    html.ocs-sidebar-active {
        overflow: hidden;
    }
    #1461691
    nik9

    Hi Tom,

    I already tried this. The thing is, I use a automatic „scroll to top“ when a filter is selected. With overflow: hidden scrolling it not possible anymore but when the automatic scroll kicks in, then the transition is fired again.

    So „turn off“ the transition when canvas open would be the best thing. But is this somehow possible?

    Timing:
    I think the animation isn’t triggered at the same time because the class is adding just slightly later than the animation is run. In that case maybe we should hook into Javascript:

    i found this here:
    https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/js/off-canvas-sidebars.js#L225
    https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/slidebars/slidebars.js#L332

    #1462548
    Tom
    Lead Developer
    Lead Developer

    I played with turning off the transition, but couldn’t get it working properly.

    The timing thing may be a question for the developers of that code – they may have a trigger they recommend using.

    #1462553
    nik9

    thanks Tom,

    So there is no way with css to do this? What about jS? Or is this a hard one?

    Cheers

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