Mobile off-canvas panel width.

Hi there,

where did you add the CSS to your site ? If it is in a Child Theme or Customizer > Additonal CSS then it should apply to all pages. So maybe your plugin or browser caches need clearing ?

I would suggest you add that code inside a media query like so:

@media (min-width: 450px) {

/* CSS in here */

}

That way it will only apply to devices that are wide enough to accomodate the wider size. I have increased it by 50px so the user has someway of closing the panel....

Hi David,

The code went inside Customizer > Additonal CSS.

Should have specified what I meant by not working. Basically, when I click on the menu button, a transparent grey layer covers the screen.

This is what I have now:

@media (min-width: 450px) {
.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);
}
.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);
}
.main-navigation.offside {
width: 400px;
}
.offside--left {
left: -400px;
}
.offside--right {
right: -400px;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 395px;
}
}

If I click on the menu button while on the home page, I get the grey screen. If I click on the menu while on certain pages, it works well.

I think the issue is unrelated to the above code as when I remove it, I still have this issue.

Thats peculiar - something is adding a display: none; property to the menu.
Can you try disabling other plugins or any custom functions to see if there is a conflict.

I think I will just stick with the regular menu for now. Thanks =)

Ok no problems :)