How to create a full-screen overlay menu in Elementor

Full-screen overlay menus are great for smaller sites with less page content, or can be used to extend navigation by hiding and showing more links. Use the PowerPack Advanced Menu WidgetYou can find out more about this in the Elementor Easily create off-canvas and full-screen overlay menus without writing any code.

Step 1: Add the Elementor Advanced Menu Widget

Before adding the widget, first decide where you want it to appear. If you only want the overlay menu to appear on a single page (such as a login page), you can add the widget directly to that page so that the menu will only appear on that page.

If you want the override menu to appear throughout the site or on every page, you can add the widget to a custom header built with Elementor so that the menu appears everywhere the header is located, usually throughout the site.

Just open the page or header in the Elementor editor and drag and drop PowerPack's Advanced Menu widget into place.

Step 2: Setting up the full-screen overlay menu

Next, select the menu you want to display from the WordPress menu list.

Then, scroll down the options until you find the "Response" section. Select "from beginning end" as a breakpoint and change the menu type to "Full Screen".

You can also change the button alignment, button style, etc. from the given settings. After making changes in the Content tab, your full screen menu will look like the following:

Step 3: Customize the style of the full-screen overlay menu

main menu: In this section, you can set the styles of the main menu items, such as text color, typography, inner margins, and so on.

pull-down menu: Here you can adjust the style of the drop-down menu items, including typography, text color, background color, border, border radius, inner margin and separator.

Toggle Button: The full screen overlay menu is triggered by toggling icons or buttons, you can customize it in this section. You can change the color, background, size, thickness, border and labels (if labels are enabled in the content tab). These settings only apply to toggle buttons.

responsive: Here you can adjust how the menu appears on different devices. Before you start adjusting, click the toggle button to trigger the menu so you can preview the changes made in real time.

1. alignment: Change the menu alignment to Center.
2. Background and link colors: Change the menu background color and link (menu element) color.
3. hover effect: Set the color of the link on hover and the background color. For submenus, you can also customize the color, inner margins, etc.
4. frame: Easily change the border color, width, etc.
5. Close icon: Adjust the color and size of the close icon.

Summary:

Full screen overlay menus are a navigation solution for small websites to hide and show more links and extend navigation functionality. Using PowerPack Advanced Menu Widget and Elementor, you can create off-canvas and full-screen overlay menus without writing any code. In a few simple steps, you can decide where to place menus, select which menus to display, and set how menus respond and how they are styled. Customization options include main menu items, drop-down menus, toggle buttons, and responsive settings to ensure that menus display well on different devices. This flexible and powerful tool allows you to provide a professional and beautiful navigation experience for your website.