fbpx
fullscreen-menu

How to Create a Fullscreen Menu in Elementor

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

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Fullscreen Menu”
  3. Hover over the widget in the search results and click install
  4. 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

1
Menu

Choose the menu you created in the menu settings.

2
Max Depth

Select the maximum number of submenu items depth level you want your menu to show. 

3
Alignment

Select alignment of the toggle menu icon from left, right or center.

4
Icon Toggle Type

By default, it is set to "Animated" and if you want to change menu icons then select "Custom Icons".

5
Open Transition

Choose any open transition effect for fullscreen menu.

6
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.

Video Tutorial

Share this post

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!