How to Create a Full Screen Overlay Menu in Elementor

Are you designing a website that needs a clean, minimal look, and you don’t want to go with a standard header layout? A lot of sites these days use off-canvas menu style or a full-screen overlay menu. You can use these styles to create a unique header layout and jazz up the site a bit with subtle animations.

Full-Screen overlay menu can be a good fit for a small website with a limited number of pages or content. Or you can use the full-screen overlay menu as an extension to hide/show additional links. The Advanced Menu Elementor widget can help you build off-canvas and full-screen overlay menus without having to worry about code.

In this tutorial, we learn how you can create a full-screen menu using Elementor and PowerPack Elementor addon’s Advanced Menu widget.

Creating a Full-Screen Overlay menu with Elementor

Before we begin, make sure you have Elementor builder and PowerPack Elementor addon installed and activated.

Step 1: Adding the Elementor Advanced Menu widget

Before we add the widget, you need to decide where all you want this widget to appear. If you wish to your overlay menu to appear on a single page, you can directly add it on the page (ex. landing page), and the menu will appear only on that page.

If you want your overlay menu to appear on the whole website or every page, you can add the widget on the custom header built with elementor, and it will appear wherever the header appears, which is usually sitewide.

Open the page/header in the Elementor editor and add the Advanced menu widget of PowerPack by simply dragging and dropping it in place. Here I will be adding the menu on the landing page as I want this menu to appear on that page only.

Step 2: Setting Up the Full-Screen Overlay Menu

Next, select the menu from the list of WordPress menus that you would like to display.
Responsive Section: Select the Breakpoint as Always and change the menu type to “Full Screen.”

You can also change the alignment, button style, etc. for the button from the given settings.

Once you have made the changes, your off-canvas menu will look something like this:

Since this is not the ideal layout style, we will make it look better with the help of the Style tab.

Step 3: Style tab Customizations for Full-Screen Overlay Menu

Main Menu: This section provides styling options for the parent/top-level menu items like text color, typography, padding, etc.

Dropdown: In this section, you can change the typography, text, background colors, add borders, border radius, padding, divider, etc. for the dropdown menu items.

Toggle Button:  Since a full-screen overlay button is triggered via a toggle icon/button, you can customize it in this section. Here you can change the color, background, size, thickness, border, and label (if enabled from the content tab). These settings are only applicable to the toggle button.

Responsive: Here, we will be making changes to the responsive version of the menu. Before we start making changes, go ahead and click on the toggle button to trigger the menu; this way, you will be able to see the changes you are making to the menu live.

1. Starting with the alignment, go ahead and change the alignment to Center.
2. Change the menu background color and the link (menu elements) color from the given options.
3. You can also change the link hover color, background, and background hover color as well. For the submenu, you can customize the colors, padding, etc.
4. You can change the border color, width, etc. easily from the options.
5. You can change the close icon color and the size, as well.

Once you are done making changes, you can go ahead and update the page.

Full-Screen Overlay Menu is ready!

After publishing the changes, your full-screen overlay menu for Elementor is ready.  Wondering what the full-screen menu in my example looks like? Here’s an example of the full-screen menu. 🙂

Creating advanced menu styles with Elementor is now super easy with PowerPack Elementor addons.