Archived topic
Styling slide-out off-canvas menu
10 replies · Started by Jake on August 16, 2019
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.
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;
}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 :)
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);
}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?
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!
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;
}Boldening seems to only work for the sub-menus. How do I apply to the main menu too?
Edited the CSS above.
Spot on! Really appreciate it, David.
You're welcome
