[Support request] Off canvas panel width

[Brian]

Hello!

I’m trying to modify the width of the off-canvas panel for my menu with no success.

Trying to set to 310px.

I tried the suggestion here but it isn’t working properly for me.

https://generatepress.com/forums/topic/off-canvas-width/

I’m using GP child theme.

Please let me know what I’m doing wrong 🙂

[Leo]

Hi there,

Not seeing the CSS being added.

How are you adding it?

Let me know 🙂

[Brian]

Hey Leo! Sorry, I removed it because I couldn’t get it to work.

Just added back in.

[Leo]

Looks like they are getting overwritten.

Try this:

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

body .main-navigation.offside {
    width: 400px;
}
body .offside--left {
    left: -400px;
}   
body .offside--right {
    right: -400px;
}
body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 395px;
}

[Brian]

Hey Leo, this is partially working! The only thing that isn’t working is the slideout exit button.

body .offside-js–is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 305px !important;
}

Any ideas?

[Leo]

Updated the code here:
https://generatepress.com/forums/topic/off-canvas-panel-width/#post-1043740

[Author]

Posts