[Resolved] Off-canvas menu/navigation width

[qpaq]

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?

[Ying]

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?

[qpaq]

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.

[David]

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.

[qpaq]

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.

[David]

The open sub menus, will the user be able to close them? Or do you want them visible ALL of the time

[qpaq]

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.

[David]

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.

[qpaq]

Thank you, David. Works very well. I’ll do the styling later on.

[David]

Glad to hear that!

[Author]

Posts