[Resolved] width off canvas panel

[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;
}

[David]

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%;
}

[Heinrich]

working fine, tks a lot.

[David]

Glad to be of help

[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 */
}

[Ying]

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!

[Author]

Posts