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.

7 bình luận về “Off Canvas Panel”

  1. I am commenting to let you know of the fabulous encounter my cousin’s daughter experienced reading your site. She even learned many issues, not to mention what it’s like to have a wonderful giving mindset to have many people just grasp chosen grueling subject areas. You really exceeded our expectations. Many thanks for distributing the informative, healthy, educational and as well as easy thoughts on the topic to Jane. https://hiedmedsout.com/

    Trả lời
  2. A lot of thanks for each of your hard work on this web page. Kim really likes going through investigation and it’s really easy to understand why. Many of us know all of the dynamic method you make powerful strategies on this web blog and as well as improve participation from people on that issue so our girl is in fact learning a lot of things. Have fun with the remaining portion of the new year. You are conducting a really good job. https://hierectiledysfunctionout.com/

    Trả lời
  3. A lot of thanks for all your efforts on this site. Gloria enjoys doing investigation and it’s easy to understand why. Almost all know all concerning the dynamic means you deliver great information on the web blog and as well encourage contribution from other people on that concept plus our daughter is actually being taught a lot. Have fun with the remaining portion of the new year. You’re the one conducting a glorious job. https://joneslawncarela.com/

    Trả lời
  4. A lot of thanks for each of your hard work on this web page. Kim really likes going through investigation and it’s really easy to understand why. Many of us know all of the dynamic method you make invaluable steps on this web blog and as well as improve participation from people on that idea so our girl is certainly learning a lot of things. Have fun with the remaining portion of the new year. You are conducting a pretty cool job. https://risniarisperidone.com/

    Trả lời
  5. I enjoy you because of all of the effort on this blog. Debby delights in conducting internet research and it’s easy to see why. A number of us hear all about the compelling form you create effective guides by means of the blog and boost contribution from other ones about this area of interest and my child has been becoming educated a great deal. Enjoy the remaining portion of the new year. You’re carrying out a fabulous job. https://risniarisperidone.com/

    Trả lời
  6. I am only writing to make you understand what a superb experience our princess undergone viewing your webblog. She picked up such a lot of things, with the inclusion of what it is like to possess an ideal teaching spirit to make the mediocre ones without difficulty master specified tricky topics. You undoubtedly surpassed readers’ expected results. Thanks for rendering those useful, trustworthy, revealing as well as unique tips on your topic to Sandra. https://wellbutrinbupropions.com/#

    Trả lời

Viết một bình luận