Sleek and minimal menu bars are in trend nowadays.
People love to keep their menu bar sleek and straightforward to increase user experience.
Because the menus are the first things that users try to explore when visiting your website, and, research says that well-structured and simplified menus may lead to better user experience, hence more conversion.
Otherwise, if you keep a basic WordPress menu without any attractive layout, visitors will not struggle to get around and leave.
- Why do you need a custom navigation menu?
- Create a Basic WordPress Menu using Elementor
- 1. Create a simple menu for your WordPress website
- 2. Choose and customize navigation menu items
- 3. Create submenus; parent and child menus
- 4. Manage your menu location and publish
- How to create a navigation menu using Elementor pro nav’ widget
- Elementor Nav-Menu widget Key Features
- Create a menu with nav-menu pro widget
- Mobile responsive menu
- Wrapping up
Why do you need a custom navigation menu?
It’s critical to know that the navigation menus are important not only for bringing traffic to your site but also for better SEO ranking.
Indeed, the nav-menus are primarily designed for user engagement, but this is not the sole purpose.
The second most important factor is to keep in view the role of “WebCrawler” or Bots that are designed to crawl the websites and index the content to the relevant level and reporting back to the search engine to rank the content in the right place.
Therefore, if you are creating too complicated menus, then it would be difficult for the bots to rank your content, but also you’ll lose your visitors.
In short, ‘ease of navigation’ is a pivotal contributor to enhance better user experience as well as plays an imperative role in boosting our site ranking and boosting traffic.
It’s an excellent reason for many business websites to keep a single navigation icon instead of a complex menu bar, which loads up to a full-screen menu when clicked.
Thanks to the Elementor pro widget with a 100% responsive navigation menu, you can create pixel perfect and incredibly flexible menu bar without using any code.
In this tutorial, we’ll demonstrate you how to use the Elementor navigation menu widget to get the customized, advanced WordPress menu.
Before starting with the Elementor Navigation widget, let’s explore how we can create a simple WordPress menu using Elementor free version.
Create a Basic WordPress Menu using Elementor
To create a basic WordPress menu, you don’t need to install any plugin. However, the basic menu doesn’t come with customization options, and it will come with only the default theme’s menu bar where the visitors can visit different sections of your website.
1. Create a simple menu for your WordPress website
To create a simple menu head over to the backend of your website and follow these steps.
Go to: Appearance > Menus.
Now add the name of your menu and click on “Create Menu.”
2. Choose and customize navigation menu items
Once you are done with creating your basic menu. You’ll need to add items, and a list of items would appear on the side of the page where you can choose the dropdown menu items.
Now click on the checkmark of each menu item you want to include in the menu and don’t forget to click use the ‘view all tab’ option if you’re going to include these types in all pages.
Once you have check-marked all the essential items, you’ll need to add some short descriptions under the menu structure.
Navigation label: add links to your menu, e.g. “store” “Gallery” etc.
Title Attributes: this is the text that is going to appear once you hover over the menu item.
Link Relationship: mention if you are linking this website to any other website or your family or friend’s website.
3. Create submenus; parent and child menus
Now, when you are done with adding the menu items, you can add a submenu to support your main menu. Create a parent and child menu options for your visitors, so once they hover over the parent menu, they could see the child menu and navigate to their desired menu easily.
You can also reorder the menu options. Simply drag’n drop the menu items underneath any other item in a row.
4. Manage your menu location and publish
Now its time to display your menu on the right Location once you are done with all the menu settings. To manage your menu location
Go to: Menu Editor > Manage Location > click on the Location where you want to display.
You can click on the primary menu as Top menu and then publish.
How to create a navigation menu using Elementor pro nav’ widget
If you like to add a customized nav’ menu to your WordPress site, you’ll need the Elementor Pro version. The Elementor Pro version comes with Elementor nav widget along with many other special features such as 300+ templates, a theme builder, popup widget, WooCommerce widgets, and many other interesting features.
What are the specific key features of the Nav Menu widget itself? Here is a brief introduction.
Elementor Nav-Menu widget Key Features
- The Nav-menu widget gives you the freedom to place your menu anywhere you like to. On your header or the top or anywhere on your page.
- You can add multiple menus on your site and also on your pages separately or globally.
- Give a dazzling look to your menu by using animation, hovering effects or active status
- Create a mobile responsive menu of your site and control how your site will look on mobile screens
- Customize color, typography, and padding or other adjustments of your menu bar
- Create a pixel-perfect menu with the right precision of alignment, spacing, and padding.
Create a menu with nav-menu pro widget
You’ll need to create a basic WordPress menu as we have mentioned above and then you will customize the default WordPress menu using the pro-nav-menu widget. Once you have created the primary list, then the next step is to add it to your desired location, i.e. Header section.
Now when you are done with basic settings, let’s customize the menu using the nav-menu widget.
On the topmost corner of the setting section, there are three options available; Content, Style, and Advanced.
The Layout section: you have three options Horizontal, vertical, or a hidden dropdown accordion.
- Horizontal: The horizontal layout is the most common layout used by the sites. It spreads across the screen from the direction of left to right.
- Vertical: You will also find a vertical layout on many sites, specifically on sites that offer creative services. In the case of a vertical layout, the spread of the navigation bar will be from top to bottom.
- Dropdown: Dropdown menus are also pretty common. Dropdowns are vertical layout and require interaction with the user to reveal. They are mostly used to create a clean design.
Align section: this section helps you to align the menu text items; centre, right, or left.
Animation section: this section will allow you to add animation effects under, over, or double line animation effects. You can also go for the frame, background, and subtle text animations.
The underline animations are as follows:
- Fade: The fade animation offers fade animation below the menu items.
- Slide: The slide animation slides the bar below the menu items.
- Grow: The grow animation grows from the middle to outwards and gives a sensation of growth.
- Drop in: Drop in animation flows from bottom to top.
- Drop out: Drop out animation flows from top to bottom.
Similarly, there are framed, overline, double line, background, and text animation. Each one of them offers their own set of animations and you can check them out yourself to learn what you get with them.
Pointer section: select the type of pointer from the dropdown menu.
Submenu indicator section: the Elementor widget is packed with many submenu styling options. Where you can not only control the color, style, and also the background of the menu.
Padding and menu spacing: padding can be adjusted quickly. You can change the horizontal padding for menu and submenu, vertical padding, in-between space also the right, left, and centred alignment.
Elementor approaches menu spacing and padding extremely well. They worked hard behind the doors to ensure that they can bring the tools to the developer so that they can easily create the design that they are thinking.
The menu spacing offers a lot of options including:
- Space between menu items
- Horizontal and vertical padding for menu and submenu elements
- Center, left, right, and justified alignment.
Colour background and Typography: you can get your tailored-branded look with the help of the desired color scheme and background color. Also, you can choose the transparent or semi-transparent menu options as well.
As a designer, you can play with these options as much as you can and ensure that you design the backgrounds as per your likings.
Mobile responsive menu
Mobile is an important part of the web, and that’s why Elementor developers also provide tools so that you can create the navbar for the mobile as well.
Elementor widget allows you complete control for mobile menu options on WordPress. You can control the mobile screen view with a separate set of settings for mobile-only screens. There is an option for mobile screen settings at the bottom of the Elementor setting section where you can view your mobile screen options.
In short, the Elementor’s mobile menu features are as below:
- Full width on mobile: You get the option to set full width or limited width as well.
- Tablet or mobile breakpoints: You can use the breakpoint settings to set the mobile menu for mobile or tablet.
- Vertical and Accordion Menus: Elementor also offers the option to display a collapsible hamburger icon.
- Toggle align: The hamburger icon can be aligned center, left, or right.
- Aside/Center alignment: Choose the alignment of the mobile menu.
Responsive navigation: Offers responsive positioning of the menu.
The menu is one of the most significant features of any website. Because it helps the visitors to walk through your website and if you created a list smartly it’d help in keeping your visitors on your site for a long time. The menu is equally important as that of any website’s entire layout, the header, and the footer section.
Therefore, the menu widget must be capable of delivering your unique brand look with all the essential features. The Elementor Navigation widget comes with feature-rich capabilities that allow the customers to customize the menu section to fit into your brand’s voice. Now, you can use a custom tailor-made stylish menu across your website, on your landing page, header, or any other section where you like to display it.