Full-width Off Canvas Panel

There might be cases where you would need the Off Canvas Panel to be full-width, when, for example, you have your mobile menu assigned to it. Having longer menu items would actually make this a solid option. Just use the following CSS:

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

GeneratePress logo

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!