12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Nov 26, 2021

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

Sridhar Katakam

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


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.


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

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

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.