Off Canvas Panel

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.

2 thoughts on “Off Canvas Panel”

  1. May I simply say what a relief to uncover somebody that really understands what theyre discussing over the internet. You certainly know how to bring a problem to light and make it important. More and more people really need to check this out and understand this side of the story. I was surprised that youre not more popular because you certainly have the gift.

Leave a Comment

Item added to cart.
0 items - $0.00