[Resolved] width off canvas panel

Home Forums Support width off canvas panel

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1179741
    Heinrich

    hi team,

    i am using following code for width of the off canvas panel. i want to change to 100vw, but it doesn`t work.
    any idea?

    /* breite off-panel-canvas */
    
    body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(400px,0,0);
        -moz-transform: translate3d(400px,0,0);
        -ms-transform: translate3d(400px,0,0);
        -o-transform: translate3d(400px,0,0);
        transform: translate3d(400px,0,0);
    }
    body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-400px,0,0);
        -moz-transform: translate3d(-400px,0,0);
        -ms-transform: translate3d(-400px,0,0);
        -o-transform: translate3d(-400px,0,0);
        transform: translate3d(-400px,0,0);
    }
    
    body .main-navigation.offside {
        width: 400px;
    }
    body .offside--left {
        left: -400px;
    }   
    body .offside--right {
        right: -400px;
    }
    body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left: 395px;
    }
    #1179822
    David
    Staff
    Customer Support

    Hi there,

    try this:

    /* breite off-panel-canvas */
    
    body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(100%,0,0);
        -moz-transform: translate3d(100%,0,0);
        -ms-transform: translate3d(100%,0,0);
        -o-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
    body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-100%,0,0);
        -moz-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
        -o-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }
    
    body .main-navigation.offside {
        width: 100%;
    }
    body .offside--left {
        left: -100%;
    }   
    body .offside--right {
        right: -100%;
    }
    body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left: 100%;
    }
    #1179936
    Heinrich

    working fine, tks a lot.

    #1180371
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.