[Resolved] Making Off Canvas Panel Width 310px With No Luck!

[Ethan]

Hi there, I am trying to make my off canvas panel a bit wider both on mobile and tablets.

I am particularly aiming for iPhones (500px) and non-pro iPads (768px). I changed the code in Customise > Additional CMS like this:

.main-navigation.offside {
width: 310px;
}

I assume it will change the width for all devices. Okay it changes but when I close the panel it still overflows, so the menu looks like it doesn’t close completely (sorry I hope I made it clear).

Could you please help.

[Elvin]

Hi,

You can try this CSS:

/* for screens not larger than 768px */
@media(max-width:768px){
nav#generate-slideout-menu {
    width: [your width here];
}
}
/* for screens not larger than 600px */
@media(max-width:600px){
nav#generate-slideout-menu {
    width: [your width here];
}
}

We’re basically setting different widths for different view widths. You can change 600px within the @media rule to your preferred view width to apply rules on.

A wise man once said:
"Have you cleared your cache?"

[Ethan]

Hi Elvin, it’s still not working 🙁

It still leaves some of the slider’s part on the screen when you close the menu on mobile and ipad 🙁

[Elvin]

Ah that’s right.

We need to target only the open state of the offcanvas menu which is the .is-open selector.

Try this.

/* The container */
.main-navigation.slideout-navigation.is-open {
    width: fit-content;
}
/* The actual off canvas width */
.main-navigation.slideout-navigation.is-open .inside-navigation {
    width: 310px;
}

A wise man once said:
"Have you cleared your cache?"

[Ethan]

This one worked like charm, thanks Elvin 🙂

[Elvin]

Nice one! Glad its working for you.

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts