How to move an element into OffCanvas on smaller viewports in Oxygen

This members-only tutorial provides the steps to move filters created using WP Grid Builder into OxyExtras' OffCanvas component at a specific breakpoint.

Two approaches are covered.

1. window.matchMedia - run a line of JS code that moves the filters into the OffCanvas at the media condition. This means we will not see the "action" (that of filters moving into OffCanvas) happening as we reduce the width of the browser window. To see the change, we would need to refresh the page.
2. Event listener on resize event - The filters will be moving in and out of the OffCanvas depending on the viewport size once resize event ends.

Video of Approach 2

Setup

In this example let us set this up on the blog posts index.

Create your desired filter(s) using WP Grid Builder.

Ensure that WPGridBuilder's Oxygen integration is active.

Add a Columns component in the Posts page Oxygen Template.

Place the filter(s) in the left column Div and Easy Posts (recommended)/Repeater in the right column Div.

Leave the Query type as Default in Easy Posts/Repeater.

OffCanvas

Enable Off Canvas in OxyExtras' settings and add the component in the Template.

Add any elements you want to appear above the filters inside.