[Support request] making off-canvas panel wider

[Leslie]

Hi, I’ve tried various solutions but can’t seem to figure out the correct css to (1) make my off-canvas menu wider and (2) allow the longer menu item text to wrap. At this link, see the slide-out hamburger menu “Topics”: . Thanks for your help. Leslie

[Elvin]

Hi there,

You can try playing around with this CSS for the width.

nav#generate-slideout-menu {
    overflow: hidden;
}

/* Desktop Off Canvas width */
body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-500px,0,0);
    -moz-transform: translate3d(-500px,0,0);
    -ms-transform: translate3d(-500px,0,0);
    -o-transform: translate3d(-500px,0,0);
    transform: translate3d(-500px,0,0);
}

body .main-navigation.offside {
    width: 500px;
}

body .offside--right {
    right: -500px;
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: 500px !important;
}

[Leslie]

Thanks, that worked, and I added this to make the close button remain on the right (rather than moving towards the middle):

.slideout-navigation button.slideout-exit {
width: 60% !important;
text-align: right !important;
}

Thanks again.

[Elvin]

Nice one! glad you got it sorted. 😀

[Author]

Posts