Brizy is a relatively new player in the WordPress page builder field (Brizy was released in 2018, younger than Elementor and Divi Builder). But in terms of features, Brizy is not inferior to its seniors, especially on the menu section. Brizy, for instance, comes with a built-in feature to create a mega menu. With the Brizy popup builder feature, you can even create other menu types such as a full-screen menu and an off-canvas menu. This article will show you how to create a full-screen menu in Brizy.
You will only need two steps to create a full-screen menu in WordPress using Brizy:
- Create the menu using Brizy popup builder
- Call the popup via a link
Since we need the Brizy popup builder feature, you need to upgrade your Brizy to the pro version in case you haven’t done so.
Step 1: Create the menu using Brizy popup builder
The popup builder of Brizy supports several trigger types. One of which is on-click. You can make use of this trigger type (on-click) to create the full-screen menu. The idea is, you create a popup and set the trigger type to on-click and then call the popup using a link.
First off, 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 and click the Edit with Brizy button to edit the popup using Brizy. This will open the Brizy editor.
Click the plus button on the canvas area to start creating the popup. You can either create the popup from scratch or from a premade template. To create the popup from scratch, you can simply click Create your own. Conversely, you can simply select a premade template you like to create the popup from a premade template. In this example, we will create the popup from scratch.
Before setting the popup into a full-screen mode, you need to move the location of the close button which lies outside the popup by default. The reason is that the close button will be invisible on the full-screen mode if it lies outside. Click the X icon to show the settings bar and then click the third tab (from the left) on the appearing settings bar to set the close button location. From this settings bar, you can also set the close button color and icon size.
Once done setting the location of the close button, the next step is set the popup background. To do so, hover your mouse over the popup and click the grey arrow icon. Click the Background tab on the appearing bar to use an image background. To use a solid color background, you can click the Colors tab.
Next, you can set the popup to the full-screen mode. To do so, click the mixer icon on the top-right corner and click the gear icon on the appearing settings bar. Set the width to 100% and the height to Full Height.
The next step is to add the content to the popup. Since you want use this popup as a menu, you can add elements like navigation menu, contact form, or other elements usually found on a menu. You can basically add any element.
Once done adding the content, the next step is set the trigger type. Click the mixer icon on the top-right corner to open the settings bar. On the settings bar, click the Popup tab (leftmost) followed by Display Conditions link.
On the appearing window, set the trigger type to On Click under the TRIGGERS tab. To set the display condition, you can switch to the CONDITIONS tab. Click the Save button to apply the changes.
Click the Update button on the bottom-right corner to apply all of the changes you made.
Lastly, save the popup to the Brizy library by clicking the heart icon on the settings bar. Clicking the heart icon will save the popup to the Brizy library on your site. If you want to save the popup to the cloud, you can provide your Brizy Cloud username and password and click the Connect button. If you want to save the popup on the library on your site instead, simply click the Skip button.
You can read our previous article for more detailed instructions on how to create a popup in Brizy.
Step 2: Call the popup
Once you are done creating the popup, you can call it via a link. You can actually call the popup from anywhere. But since menu usually lies on the header, you can create the header first. You can read this article to learn how to create a header in Brizy. In this article, we will go straight to adding an element to call the popup.
Add an element that has an option to add a link to the header block. Some examples of the elements you can add are Image, Button, Icon, and Text. In this example, we use the Icon element.
Once the icon is added, click it to open the settings bar. On the settings bar, click the chain icon to set the link. Select a popup you have just created on the Popup tab. You can find your popup under the Saved tab on the appearing library window.
That’s it. You can customize the icon to make it more eye-catching. You can, for instance, change the default icon (star) to something like a hamburger icon. Update the page by clicking the Update button on the bottom-right corner.