This off-canvas menu WordPress build feels like a real product feature: a hamburger icon that swaps to a close icon, links that reveal an arrow on hover, and a blurred, translucent backdrop, all driven by a single interaction using odd and even clicks.
Set up the header and menu icon
In the Master, pull the existing nav link out of the Navbar and place it directly in the header, then delete the old navigation now that it’s no longer needed.
Select the header, open the Add panel, and drop in an Icon element. Set its class to Icon Box, Primary, L, then open the icon library and search for a menu icon.
Set the header’s direction to Row, alignment to Center, and content spacing to Space between. Change the background to transparent, set position to Fixed, raise the Z-index so it stays on top, and anchor it to the top of the page.
Build the off-canvas menu
From the Add panel, drop a new Section just above Main and rename it, for example to OC Menu, so it’s easy to find later. Add a Menu element inside it.
Set the container’s position to Fixed with a lower Z-index than the header, so it slides in underneath it, and stretch it across the whole page.
Enter the menu, keep a single list item, and set its typography, size, font family, and weight. Add a subclass for the link (for example OC link) and set the gap between the icon and text.
Drop an icon just before the link’s text and set its class to Icon Box, Primary, L, then pick a right arrow from the icon library. On the OC link class, switch to the hover state and set the link’s color.
On the normal state, add a Transform that shifts the arrow out of view. The offset is the link’s padding plus half the icon gap plus the icon’s width, and add a Transition so it eases in smoothly. On the hover state, override the transform back to 0 so the arrow slides into place, then set the parent item’s overflow to hidden so the arrow stays clipped until it’s needed.
Duplicate the item as many times as you need and update each link’s text.
Select the container and set its sizing to Grow so the links center themselves, the hover animation still works for all of them.
Detach the container’s background color from its style variable, lower its opacity so the page shows through slightly, then add a Backdrop filter with a blur of about 30 pixels.
Set up the icon toggle
Round the menu icon’s corners, wrap it in a Div, then duplicate the icon and swap the copy for a close icon from the library. Rename the two, for example Open and Close, so they’re easy to tell apart.
Set both icons’ position to Absolute and anchor them to the top, then set the wrapping Div’s position to Relative so the close icon lines up exactly where the open icon sits. Set the Div’s cursor to Pointer.
Wire up the open and close interaction
Add a Click interaction and configure the odd click first. Fade the open icon’s opacity to 0%, and the close icon’s to 100%, both with a 0ms duration, so the swap feels instant. On the menu container, add a Translate X action from 100% to 0, and a Display property from None to Flex so the menu is hidden from screen readers until it opens, with the tween set to about 400ms.
Duplicate the odd click’s actions into the even click, then flip the values. The open icon fades back in, the close icon fades out, the container’s Translate X goes back to 100%, and Display resets to None at the end of the timeline.
Preview the open and close animation to confirm it works both ways. Then right-click the menu container and choose Hide in Editor, so it stays out of the way while you’re building but still works correctly on the live site.
Result
You now have a fully working off-canvas menu, a hamburger icon that swaps to a close icon, links that reveal an arrow on hover, and a frosted glass backdrop, all driven by a single click interaction using odd and even clicks.