Help Center

Knowledge base Plugins JetMenu How to Create Hamburger Menu to Full-Screen Menu

How to Create Hamburger Menu to Full-Screen Menu

From this guide, you will learn how to create a full-width mega menu item with a hamburger menu icon using the JetMenu plugin for your WordPress website.

Before you start check tutorial requirements:

  • Elementor (Free version)

  • JetMenu plugin installed and activated

Create Menu

First of all, a menu needs to be created. It can be done in the WordPress Dashboard > Appearance > Menus.

menus in the appearance tab

You can create a new menu by clicking a relevant link in the Edit Menus tab.

create a new menu button

Open the Custom Link tab. In the URL field, use a custom link with a hashtag instead of any actual link because this menu item does not need to redirect but only opens a mega menu.

Press the “Add to Menu” button.

hashtag in the url field

At this point, you can click on “Save Menu” or save it after creating and adding a mega Menu item.

save menu button

Create Mega Menu Item

Once the menu itself is created, you can add a Mega Menu item to the menu item with a custom link. To do so, press the “Settings” button to trigger a popup with the Mega Menu settings.

settings button next to the menu item

Then enable the Use Mega content toggle to ensure the mega content is shown on the front end.

use mega content toggle in the mega content settings

After it, you can add the needed content by pressing the “Edit Mega content” button.

edit mega content button in the mega content settings

To save the content of the Mega Menu item, push “Save.”

save button in the mega content settings

Add Icon to Mega Menu Item

It is time to add the icon representing the Menu item on the front end. It can be done in the SVG Icon field of the Item Icon tab.

svg icon field in the item icon settings

Output Menu Using Mega Menu Widget

It is time to add the built menu to a template. For example, it can be a Header template.

Drag and drop the Mega Menu widget to the template’s content area, and select a Menu you have just created.

menu field in the layout settings of the mega menu widget

You may also need to add transparency to the default menu title in the Style tab. Open the Main Menu tab, and find the States section. Set the Title Color as transparent, so only an icon is displayed on the front end. 

Make sure to add the same style to the title in Hover and Active tabs.

the title color field in the states section

Alternatively, you can enable the Hide item navigation label option by returning to WordPress Dashboard > Appearance > Menus and opening the Advanced tab of the Mega menu settings.

hide item navigation label in the advanced menu settings

Add Custom Selector to Mega Menu Width

The last step is to make the mega menu item full-width. It can be done by selecting a respective option in the Layout tab of the Content settings. 

Here, pick “Selector” as Mega Container Width Type. Also, note that the custom selector should be ‘body’.

mega container width type and custom selector fields in the content settings

Let’s check the result. The full-width mega menu is now ready and looks like this:

full-width mega menu on the front end

That’s it; now you know more about creating a full-width Mega Menu triggered by clicking on an Icon.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.