Archived topic

width off canvas panel

5 replies · Started by Heinrich on February 28, 2020

Viewing posts 1–6 of 6

February 28, 2020 at 7:11 am #1179741

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

February 28, 2020 at 8:13 am #1179822

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

February 28, 2020 at 10:52 am #1179936

working fine, tks a lot.

February 29, 2020 at 4:12 am #1180371

Glad to be of help

June 28, 2021 at 11:52 am #1837826

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

June 28, 2021 at 12:18 pm #1837854

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!

This archived topic is closed to new replies.

Start building better websites today.