How to Move an Element into Another on Smaller Viewports in Bricks

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 #.