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

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

Get access to all 537 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Stock Quantity Block for WP Grid Builder

Stock Quantity Block for WP Grid Builder

In the unofficial WP Grid Builder Facebook group a user asked: Is it possible to show stock quantity on the card? I can't find it…
Categories:
Pro
How to Limit a WP Grid Builder’s Term Grid to Only Current Post Terms

How to Limit a WP Grid Builder’s Term Grid to Only Current Post Terms

In the WP Grid Builder Facebook group (unofficial), a user asks: Hi All, I'm looking for a way to update the contents of a grid…
Categories:
Random Post Inside Modal using BricksExtras

Random Post Inside Modal using BricksExtras

In the BricksLabs Facebook group a user asks: So I have a modal, that opens with a random post title and content from a custom…
Categories:
Populating WS Form Field in a Modal with Button Data Attribute in Bricks

Populating WS Form Field in a Modal with Button Data Attribute in Bricks

How a WS Form field inside of a Modal can be pre-filled by clicking the button to open it.
Categories:
Pro
Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

How to output any post type, with the taxonomy terms as Tab titles and posts inside tables with sortable columns.