Site logo

[Resolved] Off-canvas transition

Home Forums Support [Resolved] Off-canvas transition

Home Forums Support Off-canvas transition

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2579939
    Manzelov

    Hi,

    I have created an off-canvas panel which worked fine. It contains the output of a widget, showing last seen content by the visitor.

    Lately, I am seeing a strange change in its closing behavior which I would like to fix.

    The issue is, that when I close the panel it kind of stops half-way through and only then continues to fully close.

    I use the following custom css in the customizer (I believe it is from your documentation):

    /** Off canvas panel width - Start */
    body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(600px,0,0);
        -moz-transform: translate3d(600px,0,0);
        -ms-transform: translate3d(600px,0,0);
        -o-transform: translate3d(600px,0,0);
        transform: translate3d(600px,0,0);
    }
    body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-600px,0,0);
        -moz-transform: translate3d(-600px,0,0);
        -ms-transform: translate3d(-600px,0,0);
        -o-transform: translate3d(-600px,0,0);
        transform: translate3d(-600px,0,0);
    }
    
    body .main-navigation.offside {
        width: 600px;
    }
    /** body .offside--left {
        left: -600px;
    }  These couple of lines used to work but now I have comment it out, because if they are active the content of the off-canvas panel is going somewhere 50% left and not entirely visible*/
    
    body .offside--right {
        right: -600px;
    }
    body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left: 595px;
    }
    /** Off canvas panel width - End */

    Thank you!

    #2580077
    David
    Staff
    Customer Support

    Hi there,

    can you, first remove any CSS you have added, and then in Customizer > Layout > Off Canvas check which side you have it set to open and make sure it is the side you want. Then let me know and ill rewrite your CSS

    #2583071
    Manzelov

    Thank you very much, David!

    I confirm that I have deleted the related CSS and checked the side it is set to open – it is left.

    My goal is for the off-canvas to take 40% of the screen when opened in order to accommodate the contents better.

    Looking forward to your feedback!

    #2583092
    Ying
    Staff
    Customer Support

    Can you try adding this CSS?

    :root {
        --gp-slideout-width:40vw;
    }
    #2583177
    Manzelov

    Works perfectly, Ying! Thank you very much!

    #2584403
    Ying
    Staff
    Customer Support

    You are welcome 🙂

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