Offcanvas left and right full width instead of fixed px.

accessvirus

how can I alter the off-canvas in a way that left and right offcanvas will go to 100vw. When I set the viewport width to 100vw instead of the fixed 250 px defined, the transition does not run smoothly but stutters because the non OPEN class is not defined 100vw and placed negative. What is the best wat to do this? In addition for the left canvas menu item, setting it to 100vw, misses the ability to close the offcanvas box. (the right one does have an X to close it).

teitbite

accessvirus Hi. I'm afraid this was prepared for a fixed width. You may play with the values in classes:

.off-canvas-effect-4.off-canvas-open .t3-wrapper,
.off-canvas-effect-4.off-canvas-open .t3-mainnav-android {
    transform: translate3d(250px,0,0);
}

.t3-off-canvas {
    width: 100px;
}

for the different screen sizes, but this would have to set in px, so only for specific widths with a css like:

@media only screen and (max-width:479px) {

}

etc

accessvirus

ok thanks, so basically there is a class .off-canvas-open that pushes 250px to the right from the starting point that the width of 100px has?

saguaros

accessvirus
Yes, when you click to open the off-canvas, that class will be added:

off-canvas-right off-canvas-open

off-canvas-left off-canvas-open

accessvirus

saguaros thamks. And what class to use for a non opened version?
This?

.off-canvas-effect-4 .t3-wrapper,
.off-canvas-effect-4 .t3-mainnav-android

saguaros

accessvirus
Hi,

If the off-canvas is closed, all things in off-canvas are hidden too, there is only toggle button left.