This Pro tutorial provides the steps to move a Block containing a Heading and WP Grid Builder's Facet into BricksExtras' OffCanvas element for viewports 991px and below in Bricks.
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.
Step 1
Install and activate BricksExtras, WP Grid Builder and its Bricks add-on.
Go to Gridbuilder → All Facets and create a new "Categories" facet.
Action: FilterType: RadioFilter By: Taxonomy → Categories
Enable Burger Trigger, Offcanvas and Slide menu elements in BricksExtras' settings.
Step 2
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 #.
