Off Canvas Panel

by

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.

30 thoughts on “Off Canvas Panel”

  1. I do agree with all the ideas you have introduced on your post They are very convincing and will definitely work Still the posts are very short for newbies May just you please prolong them a little from subsequent time Thank you for the post

  2. My brother recommended I might like this web site He was totally right This post actually made my day You cannt imagine just how much time I had spent for this information Thanks

  3. Estou navegando on-line há mais de 3 horas hoje, mas nunca encontrei nenhum artigo interessante como o seu Vale bastante para mim Na minha opinião, se todos os proprietários de sites e blogueiros criassem um bom conteúdo como você, a web será muito mais útil do que nunca antes

  17. I loved as much as youll receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get bought an nervousness over that you wish be delivering the following unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike

  18. I was suggested this web site by my cousin Im not sure whether this post is written by him as no one else know such detailed about my trouble You are incredible Thanks

  19. Tech to Force You’re so awesome! I don’t believe I have read a single thing like that before. So great to find someone with some original thoughts on this topic. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a little originality!

  21. Hi i think that i saw you visited my web site thus i came to Return the favore I am attempting to find things to improve my web siteI suppose its ok to use some of your ideas

  25. Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  26. Family Dollar You’re so awesome! I don’t believe I have read a single thing like that before. So great to find someone with some original thoughts on this topic. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a little originality!

Leave a Comment