We are going to
- set up an offcanvas having a close button, a heading and a Slide menu using BricksExtras.
- set up a BricksExtras' Burger Trigger in the header for 991px and below which triggers the offcanvas.
- On the Posts page, add a Categories facet filters using WP Grid Builder at the left and a Posts element at the right.
- add JS to move the filters facet in the DOM into the offcanvas for screen widths 991px and below and back into the left side container 992px and above.
Install and activate BricksExtras, WP Grid Builder and its Bricks add-on.
Go to Gridbuilder → All Facets and create a new "Categories" facet.
Filter By: Taxonomy → Categories
Enable Burger Trigger, Offcanvas and Slide menu elements in BricksExtras' settings.
Edit your Footer template with Bricks.
Add an Offcanvas element at the root level near the end of your structure.
Add a "Navigation" heading, a close icon and a Slide menu.
Set the close icon's Link to External URL of
This is a BricksLabs Pro tutorial.
For full access login below or create your BricksLabs Pro account