[Support request] Offcanvas Panel don`t close right

[Kevin]

Hey, actually I use an Offcanvas Panel to put information inside. We’re using a “Contact” Button which open the Offcanvas with slideout-toggle
When I try to close, it is jerks and i’ve got an error inside the console.

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at Object.afterClose (offside.min.js?ver=2.2.2:1:4664)
    at p (offside.min.js?ver=2.2.2:1:2141)
    at a.close (offside.min.js?ver=2.2.2:1:2425)
    at HTMLButtonElement.<anonymous> (offside.min.js?ver=2.2.2:1:5586)

[David]

Hi there,

the is JS error is unrelated to the width of the off canvas

To resize the Off Canvas panel use this CSS:

/* set width of of canvas */
:root {
    --ofc-width: 600px;
}
#generate-slideout-menu.offside--right.is-open {
    transform: translate3d(calc(var(--ofc-width)*-1),0,0);
}

#generate-slideout-menu.main-navigation.offside {
    width: var(--ofc-width)
}

#generate-slideout-menu.offside--right {
    right: calc(var(--ofc-width)*-1);
}
/* adjust off canvas width on smaller screens */
@media(max-width: 601px) {
    #generate-slideout-menu {
        --ofc-width: 420px;
    }
}
@media(max-width: 419px) {
    #generate-slideout-menu {
        --ofc-width: 320px;
    }
}

Note the --ofc-width variable is set to 600px, adjust that to suit. And there two media queries that reduce its width on smaller screens.

The Javascript error exists because offside.js expects there to be a navigation element with a menu-toggle element.
And your site has not got one. You could simply ignore it, it won’t make any difference.
Alternatively add the navigation back in and hide it with some CSS.

[Author]

Posts