Many websites nowadays prefer to use a minimalistic navigation toggle icon that displays a full-screen menu rather than a complicated navigation bar. Full-screen menus are ideal for small websites with a limited number of pages and simple designs. You can build custom nav menus using WordPress and incorporate attractive styles navigations styles inside of Elementor page builder.
In this step-by-step tutorial, I’ll show you how to create a custom full-screen menu using Elementor page builder for FREE. Usually, fullscreen menus are built using popups which are included only in Elementor PRO, but in the technique today we will use a free solution by Unlimited Elements which is the Fullscreen Menu widget.
Fullscreen Menu Widget
What this widget does is, when you click on the hamburger icon it will open an overlay all over your website which shows your menu items from your WordPress website.
Step 1
Create a WordPress Menu
Add a new menu to your WordPress website:
Appearance >> Menus >> Create a new menu
Add Pages to your menu and don’t forget to save.
* Note: Don’t forget to add pages before creating your menu.
Step 2
Install Unlimited Elements
Add a new menu to your WordPress website:
Plugins >> Add New >> Search For Unlimited Elements >> Click Install
Note: Don’t forget to activate after installing.
Step 3
Install The Fullscreen Menu Widget for Elementor
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Fullscreen Menu”
- Hover over the widget in the search results and click install
- Add your Fullscreen Menu widget to any Elementor Page
Step 4
Add Fullscreen Menu Widget
Create a new section inside your Elementor page and drag the Fullscreen Menu widget inside it.
Step 4
Position Widget
In the advanced tab of widget under positioning make the widget fixed position.
Step 5
Configure Fullscreen Menu Widget
Menu
Choose the menu you created in the menu settings.
Max Depth
Select the maximum number of submenu items depth level you want your menu to show.
Alignment
Select alignment of the toggle menu icon from left, right or center.
Icon Toggle Type
By default, it is set to "Animated" and if you want to change menu icons then select "Custom Icons".
Open Transition
Choose any open transition effect for fullscreen menu.
Show Social Icons
Show or hide social media icons
Step 6
Style Fullscreen Menu
Go to the “Style” tab and edit the diffrent parts of the fullscreen menu widget.
Hamburger Icon
Icon background color, Icon color on hover, and background color on hover Customize Hamburger icon size, padding, border, border-radius.
Menu background
Menu Items
Typography, Color, and Margin
Sub Menu Items
Typography, Color, and Margin
Social icons
Example of Fullscreen Menu Effects
Here is an example of what you can achieve with Fullscreen Menu widget.
You may use the off-canvas fullscreen menu for both simple and complicated layouts. When you click the menu icon, it reveals the website navigation in a sleek way, complete with animation options to spice up your website’s appearance. It’s time to get creative using Unlimited Elements.
