- author: Michelle Nobelis
How to Create a Custom Menu for Your Website Using Jet Menu
In this tutorial, we will guide you through the process of creating a custom menu for your website using Jet Menu. We will focus on adding a desktop menu, styling it to match your website, and integrating mega menu content. With Jet Menu, you can easily add a footer to your menu, which remains constant as you navigate between pages.
Preview of the Final Menu
Before we start, let's take a look at the menu we will be building. We have added a hamburger icon, a few pages, and categories. You can add mega menu content, as shown in the women's collection category with an image gallery.
Steps to Create a Custom Menu Using Jet Menu
Follow these steps to create a custom menu using Jet Menu:
Step 1: Create a New Menu
- Log in to your WordPress dashboard and navigate to the
Create Menuto create a new menu.
- Name the menu and click
Step 2: Add Pages and Categories to the Menu
- To add pages to the menu, select the pages you want to add from the
Pagestab and click
Add to Menu.
- To add categories to the menu, select the categories from the
Categoriestab and click
Add to Menu.
- You can add subcategories to a category by dragging them under their parent category.
- To add custom links, select the
Custom Linkstab and fill in the URL and Link Text fields.
- Scroll to the bottom of the page to select the menu location, and click
Step 3: Add Mega Menu Content
- Click on the
Settingsicon for the category you want to add mega menu content to.
- Select the
Use Mega Contentoption and click
- Add a heading for the category.
- Add a divider to the menu entry.
- Add a navigation menu by searching for
navin the widgets section and selecting the desired navigation menu.
- Add an image gallery by searching for
galleryin the widgets section and customizing the gallery settings.
- Turn off the mobile trigger to avoid the hamburger menu within hamburger menu issue.
- Change the navigation menu style from horizontal to vertical.
Updateto save the changes made.
Step 4: Add a Footer to the Menu
- Navigate to the
Templatessection and select the footer template you created.
- Go back to the menu and click on the hamburger icon to edit its content.
- Add the footer to the 'After Items Template' section, and click
Step 5: Customize the Menu
- Change the menu icon from a wide selection.
- Customize the menu color, container width, padding, and border.
- Add an item icon or badge for your menu items.
Jet Menu is a flexible and easy-to-use plugin that allows you to create custom menus for your website easily. You can add pages, categories, and custom links to your menu and incorporate mega menu content to enhance user experience. The steps discussed above will help you create a custom menu using Jet Menu efficiently.