[Resolved] Mobile off-canvas panel width.

[Mike]

Im trying to make my mobile off canvas panel wider. I tried using this css that was suggested in another thread:

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

But this code results in the panel only working on certain pages.

[David]

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….

[Mike]

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.

[Mike]

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.

[Mike]

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

[David]

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.

[Mike]

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

[David]

Ok no problems 🙂

[Author]

Posts