Note: Forgot to mention that Overflow for the Modal should be set to scroll.
Summary of steps from the above screencast:
Add a hamburger icon in your header.
in its custom CSS.
Purchase, install and activate Expandable Menu plugin.
At Appearance > Menus create a new menu if one is not present already.
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.
[expandable-menu] as shortcode.
If your menu’s name is not
[expandable-menu menu="Your Menu Name Here"]
Set Width to 100%.
Add Social Icons component.
Advanced > Size & Spacing set top Margin to
Add an Icon for the close button.
cursor: pointer; in Advanced CSS.
Layout > Position: absolute.
Top and Right: 5px each.
Assign it a class of