[Resolved] width off canvas panel

Home Forums Support [Resolved] width off canvas panel

Home Forums Support width off canvas panel

Viewing 6 posts - 1 through 6 (of 6 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
    #1837826
    Serhii

    Exit button position don’t changed on my site. It’s under the first menu item.

    https://somnolog.com.ua

    this code part not working:

    body.offside-js–is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 100%; /* i try 400px, 350 px, 60 px */
    }

    #1837854
    Ying
    Staff
    Customer Support

    Hi there,

    Your setting is different from Heinrich’s settings, that’s why the CSS isn’t working for you.

    Could you open a new topic and describe what you are trying to achieve?

    Thanks!

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