[Video] Off Canvas Panel with Expandable Menu in Oxygen

This tutorial provides the steps to set up off-canvas menu in Oxygen using the Modal component and my Expandable Menu premium plugin.

Note: Forgot to mention that Overflow for the Modal should be set to scroll.

Summary of steps from the above screencast:

Step 1

Add a hamburger icon in your header.

Add cursor:pointer; in its custom CSS.

Step 2

Purchase, install and activate Expandable Menu plugin.

Step 3

At Appearance > Menus create a new menu if one is not present already.

Step 4

Add a Modal.

Set its trigger to user click of the hamburger icon.

Set Horizontal Item Alignment to Center.

In Modal Styles, set width to 300px and position to right.

Advanced > Size & Spacing > Padding: 40px on all sides.

Set Height to 100vh.

If you want to align the social icons (or any other element like a search form) to the bottom of off-canvas panel, set Modal’s Display to flex.

Set Overflow to scroll and Position to relative.

At Effects > Animate On Scroll, enable fade-left animation.

To make the panel stand out a little, add an inner box shadow of rgba(0,0,0,0.2) color with 0, 0, 30 values.

Add a logo image or any other element(s) of your choice like a heading inside the Modal.

Add a Shortcode component.

Enter

If your menu’s name is not Main Menu, use

Set Width to 100%.

Add Social Icons component.

Advanced > Size & Spacing set top Margin to auto.

Add an Icon for the close button.

Add cursor: pointer; in Advanced CSS.

Layout > Position: absolute.

Top and Right: 5px each.

Assign it a class of oxy-close-modal.

That’s it!