Archived topic
Off-canvas menu/navigation width
9 replies · Started by qpaq on November 25, 2022
Hi,
I've tried all the methods and CSS codes found on this forum to change the width of the off-canvas menu on my site but couldn't make them work.
(Including this and this one among many others) When I check by Chrome Inspector, I can revise the new values and see that they are applied to the site. But when I just exit the Inspector, the CSSs I've entered into the Custom CSS fields do not reflect on the site.
- Basically, I'd like to make the off-canvas menu (right side) have a width of 400px
- Also, I'd like to make the sub-menus to be displayed as open, not closed by default.
- It would be good to have some indention on the submenus to increase legibility.
Could you help me with these?
For the width, try this CSS:
body .main-navigation.offside {
width: 400px;
}For the indention on the submenu, feel free to adjust the values.
/*child*/
.main-nav >ul >li > ul.sub-menu.toggled-on > li > a {
margin-left: 20px;
}
/*grandchild*/
.main-nav > ul > li > ul.sub-menu.toggled-on > li >ul >li >a {
margin-left: 40px;
}For the auto-open submenu, do you want it only open the first level of the submenu(Products menu item)? Or all submenus?
Hi Ying,
I've applied your codes and changed the width to 600px to see better if something changes but unfortunately nothing changed after purging the cache and even I turned off the JS and CSS optimization plugins.
I think something else overrules the CSS code.
For the auto-open sub-menu, I want all child and grandchild submenus to be visible when off-canvas is triggered.
Hi there,
remove any CSS you have added for the offcanvas width so far, and add this CSS before any other CSS you have>
@media(min-width: 401px) {
#generate-slideout-menu.offside--right.is-open {
transform: translate3d(-400px,0,0);
}
#generate-slideout-menu.main-navigation.offside {
width: 400px;
}
#generate-slideout-menu.offside--right {
right: -400px;
}
}
Note, that this will only apply to screens wider then 400px.
Hi David,
That works well, thank you.
How can I make the auto-open sub-menu?
I want all child and grandchild submenus to be visible when off-canvas is triggered.
The open sub menus, will the user be able to close them? Or do you want them visible ALL of the time
All should be visible, there is no need of closing or opening of submenus on the off-canvas menu. I'll use it only on desktop.
Add this CSS:
#generate-slideout-menu.main-navigation ul {
display: block!important;
left: auto;
opacity: 1;
transition-delay: 150ms;
pointer-events: auto;
height: auto;
overflow: visible;
}
.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
display: none;
}I removed the toggles too.
Thank you, David. Works very well. I'll do the styling later on.
Glad to hear that!
