How to Optimize Your Website Navigation Menu with Elementor Pro and WordPress

If you want to design a nice menu for your website, there are a couple of different methods you can choose from. One is to use WordPress' default menu editor, which is simple and practical. Another is to utilize Elementor's navigation menu widget, which canHighly customizableyour menu to make it more responsive to your needs.

Creating a Navigation Menu in WordPress

Creating a navigation menu in WordPress is easy, first, log in to your WordPress dashboard and click on the sidebar "Appearance > Menu". Find and click oncreate a new menuOn the page you will see an input box for the name of the new menu you want. Once you have entered the name, click on the blue "Create Menu" button to start adding your menu items.

2. Adding and customizing navigation menus

On the side of the page, you should see drop-down menus containing pages, posts, custom links, and categories to choose from.

Adding pages to the navigation menu in WordPress is pretty straightforward. First, make sure you click on the "View All" tab on the "Menu" page to browse all available pages. If you have a lot of pages, you can use the "Search" feature to quickly find the page you need. Check the checkboxes next to the pages you want to add and click "Add to Menu".

After adding several pages to the menu, you can further customize each menu item. Click on the arrow next to each item in the menu structure and you will see the following options:

• Navigation tabs: This is the name of the links displayed in the menu, such as Shop, Gallery and About.
• Title Attributes: This is the prompt text that is displayed when the mouse hovers over a menu item to provide more information or instructions.
• Open link in new window: Normally, it is not recommended to check this box unless linking to an external site.
• CSS class: Here you can add CSS classes to customize styles, such as adding padding or bold text.
• link relationship: If the link points to an associated third-party website, the relationship can be stated here, such as a partner, family member's website, or another website of your own.
• descriptive: If your theme supports displaying descriptions, here you can fill in a short description of the menu item.

3. Change the structure of the navigation menu

Once you've added all your menu items, you can further optimize your menu, such as setting up sub-menus.WordPress allows you to create hierarchical menus, which means that you can set up parent menu items and the sub-menu items below them. This way, when a visitor hovers over the parent menu item, the child pages underneath it will be displayed.

To reorder menu items or create submenus, you can do this by dragging and dropping. This is done by: if you want to set a menu item as a sub-menu, just drag it below its corresponding parent menu item and slightly to the right, so that the sub-menu item is set. After this operation, your website navigation will be more hierarchical and easier to navigate.

4. Publish your menu

In the Menu Editor screen, click on the "Manage Locations" tab. Then, select the location you want to set as the new menu. The available locations depend on the theme of your site, but in general, you'll probably see options like "Main Menu" or "Top Menu". Check the corresponding boxes to set your new menu in these locations. This step will help you ensure that your menu appears in the right place on your website.

You can also find similar setting options at the bottom of the main menu page, which are presented as checkboxes.

If this doesn't work, you can try another approach: go to "exterior condition">"widgets" area, then drag the new custom menu or navigation menu widget to the location you wish. This will arrange the menu layout of the site as you want it.

Navigation menu widgets for Elementor Pro

In order to use the navigation menu widgets, you need to install any version of theElementor ProIf you are using the free version. If using the free version, you must stick to the default WordPress menu or use a third party.

With Pro, you can also access more than 300 templates,Theme builder,WooCommerce websiterespond in singingMarketing pop-upsThe site has more site animations and additional widgets just for WooCommerce users.

How to make navigation menus in Elementor

The Navigation Menu Widget is very flexible and feature-rich, giving you the freedom to place menus on your website that are not limited to the top of the page or the header area. You can place it anywhere you like, even include it in articles. Here are some of its main features:

• You can add multiple menus anywhere on the site.
• Easily add attractive hover animation effects.
• Supports responsive design for mobile devices and can be customized to display on computers, tablets and phones.
• Adjustable layout, colors, and other design elements give you precise control over the appearance of your menus.
• Exhaustive padding, spacing and alignment options are provided to ensure that every detail of the menu is flawless.

First, create a default WordPress menu. Be sure to follow the tips above to learn exactly how to do this.

If your WordPress menu is complete, add it to your site using the Navigation Menu widget. To do this, create or edit the template where you want the menu to appear (e.g.header). Here, find the navigation menu widget and add it to the location you want.

Once done, your WordPress menu can now be edited - and customized - in Elementor!

1. Layout and animation

On the left sidebar, you should see three tabs:Content, Style and Advanced. The first thing to do (if not already done) is to go to the"element"and shall"menu"Change to the menu you want to display. This allows you to see it in the preview screen.

When setting the layout of the menu, you can choose between a horizontal layout, a vertical layout, or a hidden drop-down collapsible menu. Try out the different layout options and you'll immediately see how the menu changes in various styles. In addition, you can adjust the alignment of the menu items to meet your design needs.

When it comes to animations, you have a variety of options to make your menus more attractive. These include underline, overline, and double underline animations, as well as border animations, background animations, and text animations. Simply click "pointer on a gauge"drop-down menu to select your favorite type of animation, and then click "anime"View and select specific options. Here you can see some specific examples of animation effects.

The Submenu Indicator allows you to modify the display style of the arrow icons for submenus. If you want to further customize the appearance of the submenu, go to the Styles tab and click on the Dropdown Menu section to expand it. Here you can adjust the behavior of the submenu in normal display and on hover, change the text layout, add borders, shadows, or dividers, and adjust the inner margins to fit your design needs. Such settings will make your menu more personalized and functional.

2. Color and spacing

You set up the menu layout the way you like it, you can customize it even more with color and fill adjustments. Go to"type"tab and expand"main menu"The

In the layout settings, you can edit the size, font, and thickness of the text, and you can choose to set the text to all uppercase or lowercase. In addition, you can make individual style adjustments for different types of devices. For example, you can set the text size to increase on mobile devices, change the text color on desktop devices, or make any other adjustments to your liking. These options allow you to provide the best browsing experience for each device.

You can use the Text Color and Pointer options to customize the color of the menu links when they are viewed normally, when they are hovered, and when they are activated. For each of these states, you can adjust the style for the hovered and active states respectively.

Adjusting the spacing is also easy and precise; you can set the padding of the text, the letter spacing, the height of the lines, and more:

• your height (honorific): Adjusts the height of a line, similar to vertical padding, affecting the space above and below the text.
• letter spacing: Sets the distance between the letters; the larger the spacing, the wider the gap between the letters.
• pointer width: Set the thickness of the line in hover or active state.
• Horizontal Fill: This is the space between menu items or, in a vertical layout, between menu items and column edges.
• Vertical Fill: In a vertical layout, this is the space between menu items, or between the top and bottom of a column.
• Space Between: This option increases the space between menu items.
• Border radius: If you use a background color, this setting adds a rounded corner effect.

If you set breakpoints for mobile devices, you can set different spacing for desktop and tablet modes. If not, you'll need to edit the mobile options separately.

Finally, in the Advanced tab, you can set CSS classes, adjust margins and padding, add background images, change responsive settings, and more. You need to be careful when editing these options so that they don't affect the performance of your website on mobile devices.

3. Configuring the mobile menu

The navigation menu widget provides a number of setting options in the Layout tab that are optimized for smaller devices. Below is a brief description of these options:

• breakpoint: Set when to change the layout of the menu for better display on small screen devices such as tablets or phones.
• full width: When this option is enabled, the menu on mobile devices expands to the full width of the screen and is not limited to the original width of the navigation bar.
• line up in correct order: You can choose to center the links in the mobile menu, or have them displayed to the left or right.
• switch modes or data streams: You can choose to keep the hamburger menu (the icon with three horizontal lines) or hide it completely on your mobile device.
• Toggle Alignment: Set the position of the hamburger menu icon, either centered, left-aligned or right-aligned.

In the Styles tab, you can also find options to adjust the appearance of the mobile menu toggle buttons, including customizing the color, background, size and adding borders. These settings help you further beautify and optimize the menu display on mobile.

Elementor has a responsive mode option at the bottom of the sidebar. It allows you to preview how the mobile menu will look on tablet and mobile device screens.

Summary:

There are several ways to create custom navigation menus in WordPress. While the platform's default menu setup is simple to use and meets basic needs, if you find that these menus aren't flexible enough or are missing certain features, then Elementor's navigation menu widgets may be a better option. With Elementor, creating and customizing menus is easy and flexible, with a wide range of customization possibilities.