Archived topic
Making Off Canvas Panel Width 310px With No Luck!
5 replies · Started by Ethan on December 6, 2020
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.
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.
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 :(
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;
}This one worked like charm, thanks Elvin :)
Nice one! Glad its working for you.
No problem. :)
