Today, the vast majority of WordPress themes have a responsive menu. The menu will automatically turn into a hamburger icon when you access your website via smartphone or other devices with a smaller screen. Is it possible to have a hamburger menu when you access your website via desktop? Of course. You can create a hamburger menu to replace the regular horizontal menu on your website.

This post will show you how to create a hamburger menu in WordPress with Elementor. In case you haven’t known, Elementor is a page builder plugin for WordPress. It has a theme builder feature to allow you to create a WordPress theme without coding. One of the theme elements you can create with Elementor is the header. The header you create with Elementor will replace the header of your active theme.

There are two ways to create a hamburger menu in WordPress with Elementor.

Please note that the theme builder feature is only available on the Elementor Pro. Read: Elementor Free vs Elementor Pro.

1. Create a hamburger menu in WordPress with Elementor using Nav Menu

Nav Menu is one of the design elements available on Elementor. This element will use one of the existing menus on your WordPress site according to your setting. Therefore, before using Nav Menu to create a hamburger menu, you can create a menu first in case you haven’t had one. Go to Appearance -> Menus to create a menu.

Assuming you already have a menu, go to Templates -> Theme Builder.

On the Theme Builder page, click the Header tab followed by the Add New button to create a new header.

A pop-up will appear. Give your header a name and click the CREATE TEMPLATE button to start creating your header.

You can either create the header by making use of one of the available templates or create from scratch. In this example, we use one of the available templates.

All header templates offered by Elementor contain the Nav Menu element. You need to activate this element to make further customization. Simply click one of the menu items to activate this element. Or, you can also activate Nav Menu by clicking it on the Navigator panel.

Once the Nav Menu is active, take a switch to the elements panel (panel on the left side) to customize the menu. Under the Content tab, set the Layout to Dropdown and Toggle Button to Hamburger.

By default, Nav Menu retrieves the main menu of your WordPress site (the header menu). You can change it from the Menu option (topmost on the screenshot above).

You can change the size as well as the color of the hamburger icon on the Style tab. Go to the Toggle Button section to do so.

Click the PUBLISH button to publish your header. On the next step, you will be asked to add the condition. Simply click the ADD CONDITION button to add one. Normally, a website has the same header on all of its pages so you can simply leave everything default (Entire Site) and click the SAVE & CLOSE button.

2. Create a hamburger menu in WordPress with Elementor using popup

Alternatively, you can also create a hamburger menu in WordPress with Elementor by taking advantage of the popup. You can make use of the popup builder feature of Elementor to create a full-screen menu like the following.

• Create the pop

First off, you need to create a popup to display the menu items. To make your menu looks more attractive, you can create a full-screen popup (like the one above). Go to Templates -> Popups to create a popup.

Click the Add New button to create a new popup.

Give your popup a name and click the CREATE TEMPLATE button.

Again, you can either create the popup from a template or from scratch. In this example, we will create the popup from scratch. Before start creating the popup, we want to make some settings to make the popup appears on the full-screen mode.

On the Layout section under the Settings tab, change the width unit from PX to VW and set the value to 100. Also change the Height option to Fit To Screen.

If you want to apply an entrance animation for your popup, you can select one on the Entrance Animation section.

Since your pop-up will appear in a full-screen mode, you might also want to add a close button. Make sure the Close Button option is enabled.

You can customize the close button on the Close Button section under the Style tab.

Now you can start to create the popup. Click the plus button on the Elementor canvas/editor and select a structure. In this example, we use the single-column structure.

Before you start to add an element, change the Content Width to Full Width and Height to Fit To Screen.

Also change the background on the Background section under the Style tab.

In this example, we will display four menu items on the popup. We will use four columns to place each item. Add the Inner Section element.

Duplicate one of the columns in the inner section twice so you will have four columns.

Add the Heading element to the first column and change the title according to the label of the menu item you want, “HOME” for instance. Add the link on the Link section. To customize this element, you can go to the Style tab.

Repeat the steps above on the column 2, 3, and 4 — respectively — and tailor the menu item label as well as the link. You can add the Spacer element above and beneath the menu items if you want. You can also change the width of the inner section that holds the menu items.

You can also add other elements to your menu like social media buttons or a call-to-action button. Just play around on the elements panel until you get satisfied with the result.

Once you are done, click the PUBLISH button to publish your popup.

On the appearing popup, select Advanced Rules and click the SAVE & CLOSE button.

• Create the menu button

Once you are done with the popup, you can start creating the header. We will add a button on the header as the trigger for the popup to show up. To create a header, go to Templates -> Theme Builder. On the Theme Builder page, go to the Header tab and click the Add New button to create a new header.

Give your header a name and click the CREATE TEMPLATE button to start creating the header. Again, you can either create the header from a template or from scratch. This time, we will create the header from scratch.

Add a new section by clicking the plus button on the Elementor canvas. You can select any structure according to the concept of the header you want to create. In this example, we use a single-column structure. Add a button to the header by dragging the Button element.

Change the default button text to something like “MENU” any word you want. You can also leave it empty if you want to show the hamburger icon only. On the Link section under the Content tab, set to Popup and select the popup you have created above.

Set the icon on the Icon section and look for an icon called “bars”.

Until here, you have successfully created your hamburger button. You can play around on the elements panel to customize your menu, like changing the background, setting the padding and so on. Also add other elements as you like. Once you are done, click the PUBLISH button to publish your header.