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: Filter
Type: Radio
Filter 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 #.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro