The Off Canvas Panel provides more then another place to add your navigation. With Widget Areas and Hooks it can be loaded with extra elements. As covered in the How the Show was made post we have done a little bit of fancy work to create a Shop filter as well as provide our Mobile Navigation.
You should begin by getting to know the panel. Read this for more information.
Widgets
Widgets are added in the Customizer > Layout > Widgets > Off Canvas Panel or via the Dashboard > Appearance > Widgets. We have used Woocommerce Widgets. These types of widget are dynamic. For example the price and attribute filters only display on the Shop and Archive Pages.
A little bit of CSS to tidy up the Woo Widgets and divide them with some borders:
.slideout-widget.woocommerce ul li {
line-height: 2em;
display: grid;
grid-template-columns: 0 90% 10%;
}
.slideout-navigation .slideout-widget ul.product-categories li {
grid-template-columns: 90% 10%;
}
.slideout-widget {
border-top: 1px solid #ccc;
padding-top: 2em;
}
No Desktop Navigation Toggle
As covered in the Shop article the standard Navigation Toggle for desktop as been hidden as we\’re using it for our Filter Widgets.
Dr Vaibhav is a Writer, Coach and Educator based in Jaipur, India. He writes prolifically in the Healthcare, Wellness and Marketing Spaces, and helps businesses grow their influence through his Content and Inbound Marketing services.
Visit his official website to know more.