Menu is a vital element of a website. Without a menu, your visitors will find an issue to learn what you want to offer them via your website. To impress your visitors, you can display your site menu in a unique, stylish way. One of which is that you can display your site menu in an off-canvas style. In the context of website, an off-canvas menu refers to a behavior where the menu appears on the left side or on the right side after a visitor clicks the menu button. Here is an example of an off-canvas menu.
In WordPress, there are a bunch of plugins that you can use to create a menu behavior like the one above. Such as JetMenu (Elementor only), Groovy Mega Menu, Max Mega Menu, and so on. If you use Brizy to create your WordPress-based website, you don’t need to install a new plugin to create an off-canvas menu on your website. Brizy indeed has no specific feature dedicated to creating an off-canvas menu, but with a little creativity, you can use its popup builder feature to achieve such a thing. In addition, you can also use the Brizy popup builder to create a full-screen menu.
How to Create an Off-Canvas Menu in Brizy
The process of off-canvas menu creation in Brizy involves two steps. First, you need to create the popup in which you will use it as the off-canvas menu. Once the popup is created, you can call it using a button, icon, or text, according to your preference.
Step 1: Create the popup
The popup builder of Brizy supports several trigger types. One of which is on-click. You can make use of this trigger type to create the off-canvas menu. The idea is, you create the popup and set the trigger type to on-click. You can then call the popup via a button, icon, text, or any Brizy element that has an option to add a link.
One thing. The popup builder feature is only available on the pro version of Brizy so that you need to upgrade your Brizy to the pro version in case you haven’t done so.
To start creating a popup in Brizy, go to Brizy -> Popups on your WordPress dashboard. Click the Add New button to create a new popup.
Give your popup a name and click the Publish button, followed by the Edit with Brizy button to edit the popup using the Brizy editor.
Click the plus button on the canvas area. On the appearing library window, simply click the Create your own option since Brizy has no premade popup template dedicated to of-canvas menu.
Before adding any content to your popup, you can change the background first. To do so, hover your mouse over the popup and click the grey arrow icon. On the appearing settings bar, click the Colors tab and select the color you like.
If you want to change the border radius (corner), you can click the gear icon on the settings bar and click More settings. The option to set the border radius lies at the bottom side on the appearing settings panel.
Next, you can set the align of the popup. Since you want to create an off-canvas menu, you can set the align to left or right. To do so, click the mixer icon on the upper-right corner and click the Align tab on the appearing settings bar.
Next, you can set the position as well as the size and color of the close button. To do so, click the X icon on the canvas area. You can set the close button size from the Icon tab on the appearing settings bar. To set the color, you can click the Colors tab. To set the size, you can click the two remaining tabs.
Next, you can set the size of the popup. To do so, click the mixer icon. On the appearing bar, click the gear icon. Set the width on the Width option and the height on the Height option. Since you want to use this popup as the off-canvas menu, we suggest you set the Height to Full Height. You can then set the content alignment on the Content option.
Next, you might want to change the overlay color. To do so, click the mixer icon once again to open the settings bar. You can set the overlay color on the Colors tab. If you want to disable the overlay, you can simply set the color opacity to 0%.
You can now add the content to your popup. You can add elements like menu, contact form, posts, and even custom fields if you want it. If you are new to Brizy, you can read our previous article to learn how to use Brizy.
Once you are done adding and editing the content of your popup, click the mixer icon followed by the Popup tab on the appearing bar. Click Display Conditions to set the display conditions and the trigger.
On the TRIGGERS tab, set the trigger to On Click. If you want to set the display conditions, you can go to the CONDITIONS tab. By default, the display condition is set to All. If you want your menu to be able to be loaded on the entire site, no need to change the display condition. Click the Save button to apply the change.
Click the mixer icon once again to open settings bar and click the heart icon to save your popup to your Brizy library.
Lastly, click the Update button on the bottom-right corner to update your popup.
Step 2: Call the popup
As we mentioned earlier, you can call the popup using any Brizy element that has an option to add a link. In this example, we will use the Icon element (we will use the hamburger icon). You can actually call the popup from anywhere, but since the menu icon usually lies on the header, we will add the icon on the header. You can read our previous article to learn how to create a custom header in Brizy. In this example, we will go straight to adding the Icon element to the header. Simply drag the Icon element to the header block.
To change the icon, you can click the icon to open the settings bar. On the appearing settings bar, click the star icon. You can select the icon by clicking the icon selector on the Icon option. You can also set the icon size on the option beneath it.
To set the color, you can click the Colors tab on the settings bar.
To call the popup you have just created above, you can click the Link tab on the settings bar. Click the Popup tab followed by the popup selector to open the Brizy library. On the Brizy library click the Saved tab and select the popup you have just created.
Finally, click the Update button on the bottom-right corner to update your header.
That’s it. You have just successfully created an off-canvas menu on your WordPress using Brizy.
