[Resolved] Styling slide-out off-canvas menu

[Jake]

Hello,

I’m wanting to style my slide-out off-canvas menu to look similar to this: https://conversion-rate-experts.com/. I have sub-sub menu items and currently, the design is slightly too simple and doesn’t look too great.

I haven’t styled it at all so it’s the default style.

Would this be a relatively simple CSS fix or can I customise this elsewhere?

Thanks in advance.

[David]

Hi there,

shouldn’t be too difficult with some CSS – heres the basics to add the rules and toggle background:

#generate-slideout-menu .slideout-menu li {
    border-top: 1px solid #ccc;
}

#generate-slideout-menu .slideout-menu li:last-child {
    border-bottom: 1px solid #ccc;
}

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    background-color: #ccc;
    padding-left: 20px;
}

#generate-slideout-menu .inside-navigation {
    padding-left: 10px;
    padding-right: 10px;
}

[Jake]

Hi David,

Thanks for the prompt response!

It’s looking good – just a few things to clean up. As you can see in the dropdown menuhere, the text is overlapping the dropdown button. Can I also remove the shadow background and add some space between the X and the menu?

It would be great to have a background colour when the dropdown menu is selected (like the example).

Many thanks 🙂

[David]

So this CSS to fix the overlapping dropdown toggle:

.slideout-navigation.main-navigation .main-nav ul li a {
    display: grid;
    grid-template-columns: auto 54px;
}

Space between eXit and menu:

.slideout-navigation .main-nav {
    margin-top: 40px;
}

Submenu backgrounds can be changed in Customizer > Colors > Off Canvas Panel > Sub Menu

Make Slideout overlay transparent:

.slideout-overlay {
    background-color: rgba(0,0,0,0);
}

[Jake]

Perfect!

One last thing – there’s a shadow at the bottom of the sub menu: https://stridedigital.com/ (under PPC).

How do I remove this?

[Jake]

Sorry, could I style the typography of the current page by boldening it too? So if I’m on services, it boldens that page in the menu.

Doesn’t seem to be a setting for this.

Many thanks!

[David]

Try this for removing the shadow:

.main-navigation ul ul {
    box-shadow: unset;
}

This for boldening the current page:

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    font-weight: 900;
}

[Jake]

Boldening seems to only work for the sub-menus. How do I apply to the main menu too?

[David]

Edited the CSS above.

[Jake]

Spot on! Really appreciate it, David.

[David]

You’re welcome

[Author]

Posts