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 [[expandable-menu]] as shortcode.

If your menu’s name is not Main Menu, use [[expandable-menu menu="Your Menu Name Here"]].

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!

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: