Creating a Main Menu with Elementor Theme Builder

Main Menu with Elementor Theme Builder
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 24/12/2023

Creating a Main Menu with Elementor Theme Builder

This article will walk you through how to build a Main Menu with Elementor theme builder.

Recommended Reading: What is Elementor?

IMPORTANT: This tutorial only works for websites with the Elementor Pro plugin.

One of its standout features with Elementor Pro is the Theme Builder, which allows you to design every aspect of your site, including the navigation menu. This tutorial will delve into the detailed steps of building a sophisticated menu using this dynamic plugin and Theme Builder.

Building a Website Primary Navigation Menu

Step 1: Install Elementor Pro

Ensure that Elementor Pro is installed and activated on your WordPress site. This premium version of Elementor unlocks advanced features, including the Theme Builder.

Step 2: Access the Theme Builder

  1. Navigate to your WordPress dashboard
  2. Click “Templates”
  3. Click “Theme Builder” to access the Theme Builder interface.

Step 3: Create a Header Template

Within the Theme Builder, click on “Header” in the left side panel and “Add New” to create a new template. This is where you’ll design your menu.

Step 4: Add a Nav Menu Widget

Drag and drop the “WordPress Menu” widget onto your header template. This widget seamlessly integrates your WordPress menu into your design.

Recommended Reading: What is a Widget?

It is worth noting that for you to be able to select an existing menu, you will need to create a menu in your Appearance>Menu settings. Follow the link below to set this up:

Recommended Reading: Creating a Website Main Menu

Once you have this menu setup, come back to your theme editor and select the WordPress Menu Widget in your design. The side panel editor will change, and from here you can select your new menu from the “Menu” dropdown option shown in the screenshot below.

Adding a Main Menu with Elementor Theme Builder

Step 5: Customise the Menu Layout

Select the WordPress Menu widget, and on the left panel, you’ll find a wide range of customisation options. Adjust the layout, typography, colours, and spacing to match your website’s aesthetic.

Recommended Reading: Editing Widgets with the Elementor Editor Panel

Step 6: Add Additional Elements

Enhance your menu by adding other widgets or elements from Elementor Pro. This could include a logo, a search bar, or even social media icons.

Recommended Reading: How to Use the Button Widget in Elementor

Step 7: Preview and Save

Click “Preview” to see how your menu looks in action. Once satisfied, hit “Save” to apply your changes.

Decide where your menu will appear by setting conditions. You can specify on which pages or post types your custom header template should be displayed, or set it as a site wide menu.

Setting the menu to entire site

Web Hosting

From £19.95 /mo