How to Create & Design a Custom Navigation Menu

Want to create a functional great-looking navigation menu for your WordPress site? Learn how through this step-by-step guide that goes deep into visually designing menus using Elementor's Nav Menu widget.

Navigation Menu

When it comes to creating good website UI, the navigation menu is one of the most important parts of the design. Without an easy-to-use menu that seamlessly directs visitors through your website, people will struggle to get around. Once they get frustrated, that’s all it takes to make them leave.

A boring navigation menu can also significantly detract from your site, even if it works well enough. This is where even expert UI designers struggle in creating menus that are not just beautiful and interesting, but also simple and intuitive.

If you want to design a good-looking menu for your site, you have a few options. The first is by using WordPress’ default menu editor — simple but gets the job done — or by designing a highly customizable menu with Elementor’s Nav Menu widget.

In the following post, we will go over step-by-step instructions on two ways of creating a menu in WordPress, one in the default editor, and the other with Elementor. Just follow these instructions and you’ll have your own beautiful menu in no time.

(Note that you’ll need to have a default WordPress menu created to use the Nav Menu widget, so make sure to follow this tutorial in full even if you only want to use Elementor.)

Creating a Navigation Menu in WordPress

By default, you don’t need to install anything to create a simple menu for your WordPress site. It might not be the most elegant way or the one with the most customization options. But WordPress menus work well enough to clearly direct visitors through your site, and they look okay with a default theme.

1. Create a Menu

Let’s first make a simple menu from the WordPress dashboard. Log into your backend and head to Appearance > Menus, located on the sidebar. Look for Menu Name and type in the title of your new navigation menu, then click the big blue button to create it.

2. Add and Customize Navigation Menu Items

Your menu won’t do much unless you specify what’s in it. On the side of the page, you should now see dropdowns with pages, posts, custom links, and categories to choose from.

menu-items

Just click the checkbox next to any page you want to add and click Add to Menu. Make sure to click use the View All tab, or the search function if you have too many pages.

Once you’ve added a few items, you’ll need to include some info by clicking the arrow next to each element under Menu Structure.

  • Navigation Label – The title of the link, displayed within your menu. Example: “Store”, “Gallery”, and “About”.
  • Title Attribute – Text that appears on mouse hover over that menu item.
  • Open Link in New Window – Generally, leave this off unless linking to a third-party site.
  • CSS Classes – Add a little padding, bold the text, and so on using CSS.
  • Link Relationship– If linking to a third-party related site, specify if this is a site from your colleague, family member, or even another of your own websites.
  • Description – A short description of the menu item that displays if your theme supports it.

3. Change the Nav Menu Structure

When you’ve fleshed out all your menu items, your job isn’t quite done. For one, WordPress supports submenus. That means you can create parent and child menu items. If you do, visitors will be able to hover over the parent item on your site to reveal its child pages.

Drag and drop the items into the order you want them to appear. If you want to make a submenu, drop it underneath the item you want to be its parent, then drag it to the right.

You can use the same method to change the order of your menu items to your desired sequence.

4. Publish Your Menu

In the menu editor screen, go to the Manage Locations tab and click the checkbox where you want to add your new menu. The available options depend on your theme, but generally, you’ll want to tick Primary Menu or Top Menu.

You can find the same settings at the bottom of the main menu screen in the form of checkboxes.

If this doesn’t work for you, try going to Appearance > Widgets and dropping the new Custom Menu or Navigation Menu item where you want it.

If you can’t use either of these options, you may need to switch themes or see if your theme has its own menu editor.

And there you have it: a simple, if not particularly flexible, WordPress menu. Styling it any further will require CSS knowledge.

Is that not good enough for you? Want more customization and control? Read on and we’ll show you how to create a customizable menu with Elementor.

Elementor Pro’s Nav Menu Widget

In order to use the Nav Menu widget, you’ll need to have any version of Elementor Pro installed. If you’re using the free version, you’ll have to stick with the default WordPress menu or use a third-party.

With Pro you’ll also get access to 300+ templates, a builder for Themes, WooCommerce sites, and marketing Popups, more animations for your site, and extra widgets just for WooCommerce users.

And don’t forget the other pro widgets like a Posts List, Call-to-Action button, Reviews, Countdown, and various Facebook Blocks alongside the Nav Menu.

The Nav Menu widget itself comes with extensive features:

  • Place Nav Menus anywhere you want, not just in the header or at the top of your page. Go wild and place your menus anywhere you like, even within posts.
  • Add as many menus on a site or page as you like.
  • Easily add elegant hover animations.
  • Mobile responsiveness and the ability to customize how your menu looks on computers, tablets, and phones.
  • Tweak typography, color, and other design elements.
  • Pixel-perfect precision with padding, spacing, and align options.

Now we’re going to show you how to use all of these with the Nav Menu widget.

How to Make a Nav Menu in Elementor

As mentioned above, to get started, you’re going to need to have a default WordPress menu already created. Make sure to follow the tips above to learn how.

If your WordPress menu is done, it’s time to add it to your site using the Nav Menu widget. For that, create or edit whichever template you want your menu to appear in (e.g. a header). Here, look for the Nav Menu widget and add it to your desired location.

Once finished, your WordPress menu is now editable in Elementor — time to get customizing!

1. Layout and Animations

On the left-hand sidebar, you should see three tabs: Content, Style, and Advanced. The first thing you should do, if it’s not already done, is to go to Content and change Menu to the one you want to display. This allows you to see it in the preview screen.

nav-menu-widget

Under Layout, you can set the menu to be horizontal, vertical, or even a hidden dropdown accordion. Try it out, you will immediately see how it looks in different styles. Align lets you change the alignment of your menu items.

You also have quite a few options when it comes to animations. These include under-, over-, and double-line animations as well as framed, background, and subtle text animations.

Click the Pointer dropdown to select the type you want. Then click on Animation to see the individual options. There are some examples in action here.

menu-underline

The Submenu Indicator changes how submenus’ arrow icons are displayed. To customize submenus a little more, go to the Style tab and uncollapse Dropdown. Change how they act on normal and hover states, customize typography, add a border, shadow, or divider, and of course tweak the padding.

2. Colors and Spacing

Once you have your menu layout how you like it, it’s time to customize it a little more with color and padding tweaks. Go to the Style tab and uncollapse Main Menu. Here, you control everything about the design of your menu items.

Switch on Typography to edit the text size, font, weight, set it to all upper/lowercase, and tweak the styling — with individual choices for each type of device. Make your text larger on mobile, a different color entirely on desktop, anything you like.

Use the Text Color and Pointer options to customize the color of your menu links while normal, hovered, and when it’s the active page. Use the Hover and Active buttons to edit the different states.

Customizing spacing with pixel-perfect precision is also easy; everything from text padding, letter spacing, and line-height is available. Set a number or drag the bars to change it.

  • Line-Height – This changes the height of the line, the padding above and below text, similar to vertical padding
  • Letter Spacing – Higher values mean more spacing between each letter.
  • Pointer Width – The thickness of the lines that appear on hover and when a menu item is active.
  • Horizontal Padding – This is the space between each menu item, or between the menu items and the column edges if you’re using vertical layout.
  • Vertical Padding – Conversely, this is the space between the top and bottom of the column, or the menu items if you’re using vertical layout.
  • Space Between – Use this value to put more space between each menu item.
  • Border Radius – This adds rounded corners if you have a background color.

You can set a different value for desktop and tablet mode if you set your breakpoint to be on mobile devices. Otherwise, you need to edit the mobile options.

And finally, the Advanced tab allows you to set CSS classes, change the margin and padding, add a background image to the menu, change responsive settings, and more. But be careful editing these as you could break your site for mobile users.

3. Configuring Your Mobile Menu

The Nav Menu widget also comes with some mobile options under the Layout tab, to optimize your menu on smaller devices. Here’s the list of options explained:

  • Breakpoint – When does your menu layout change to better suit smaller devices? At tablet or mobile resolution?
  • Full Width – Turn this on, and the mobile menu will stretch across the screen rather than just across the column width of your nav menu.
  • Align – Center the mobile menu links, or have them appear to the side.
  • Toggle – Keep the hamburger menu (three lines) indicator, or turn it off entirely for mobile.
  • Toggle Align – Align the hamburger icon center, left, or right.

Under the Style tab, you’ll find options to change the appearance of the mobile menu toggle as well (Toggle Button), customize the color, background, change the size, and add a border.

Remember there is an option for Responsive Mode at the bottom of the Elementor sidebar. It lets you see a preview of how the mobile menu will look on both tablet and mobile screens.

Final Thoughts: Custom Nav Menus in Elementor

There are several ways to create a custom nav menu in WordPress. As you’ve seen, the default settings of the platform do its job and are easy to use.

However, if you feel like your menu is missing something, or it isn’t quite as flexible as you need it to be, the Elementor Nav Menu widget might be the better choice for you.

It makes creating and customizing menus a simple task, is flexible, and full of potential. In short, it doesn’t just do the job — it finishes it.

About the Author

Nick Schäferhoff
Nick Schäferhoff
Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

59 Responses

  1. Still think that Elementors Nav Menu is one their weakest parts. Sure you can build your own menu, but with very limited style alternatives. Would be nice with fullscreen menu alternatives for example in the builder. Have had to do workarounds with the new popup function instead, which is fine but not the same thing. So looking forward to a updated Nav Menu somewhere in the future!

    1. Have to agree. I was initially thinking this would be a release of a new module. The current one is pretty basic all considered.

      Article was well written but the hero image (the mutli-block dropdown) and title led me to believe it was going to be much more than a recap.

    2. Me too. The navmenue doesn’t work in the footer and control over it collapsing to a Dropdown-Menü is still ongoing with servers issues on the github issue list. This hasn’t been fixed in ages.

    3. Why can not I add a button inside the Nav Menu widget? Why on the cell phone and tablets resolutions the CTA button is off the sandwich menu?

      Helpdesk answer:
      The Nav Menu Widget only pulls menus that you’ve created at WordPress Dashboard -> Appearance -> Menus. It then has a limited ability to style them. For Mobile and Tablet, you can switch switch off the hamburger menu.

      Smile face =/

    4. YES!!!! We need to be able to custom the dropdowns!! Like having full with dropdown or Multi-rows! It’s a shame that this isn’t working!

    5. Hi Robin Frejd, please can you show me how you achieved this. I have a website am working on that I need to use full screen menu.

      Thanks in advance

  2. I would agree with the other comments about Elementor lacking functionality in this area. I find myself having to develop workarounds all of the time. Thank you for the write up, though!

  3. I really like Elementor, however if you want more advanced sites, you have to resort to other solutions, the great majority of Elementor functions so far are like Betas, if you want more functions you have to buy Addons. For example, the search engine, the Slider, the Navigation Menu, and the continuous list, I believe that before launching new functions, I should start improving those that already have.

  4. Have to agree with the comments above. I want to create a navigation menu that slides out from the left and pushes the pages content to the right, but this limited widget doesn’t allow for anything like that. I’d like to start using Elementor for clients on lower budgets and it’s a shame not to be able to offer them more options.

  5. nav menu module still needs work, here are some notes for users looking into using:
    1. LOGO cannot be language specific, if you’re running multi-language site, the custom nav header module will fail you.
    2. Once your header+footer is published from elementor, your header script or footer script will be removed without warning you. Just watch out for that. Use an external “header footer” plugin to insert back your scripts. this is a workaround.
    3. the nav bar features are basic. If you want a more advance menu, the only work around is use Mega max menu. It does integrate well but it’s an additional paid plugin.

  6. Where are
    Title Attribute, Open Link in New Window, CSS Classes, Link Relationship, and Description?
    \
    In the drop down list for each page.
    I DO see:
    Navigation Label, and Original.
    I do NOT see:
    Title Attribute, Open Link in New Window, CSS Classes, Link Relationship, and Description.
    Thank you for your help finding the options:
    Title Attribute, Open Link in New Window, CSS Classes, Link Relationship, and Description.

    \

    After using WordPress Dashboard > Appearance > Menu
    and adding pages to the menu, under Menu Structure,
    my options are:
    Navigation Label, and Original.

  7. Hi, I’d like to change the header with a different logo in different pages, using the template builder, but I’d like to keep the menu header css design coming from my active theme.
    Is it possible and how?

  8. For better mobile experience I believe that menu that fits to screen as way easier to use.
    So I join with hopes of this being the next update with your nav menu widget.
    Otherwise I love using Elementor.!

  9. Elementor’s only weakness that I noticed is its header builder area. There are various issues. For Example. It doesn’t have that much user-friendly header builder area where it offers advanced Header conditions. For example, If I have a landing page that has a dark hero section and I preferred to show my white logo with white menu but when I scroll down the page and want sticky header to be active then I want to display my colored logo with dark menu, but this doesn’t work in Elementor which is the biggest issue, I have ever noticed. There are so many themes in the market which are offering this kinda conditional header builder, but Elementor doesn’t have any option either with its basic themes

    Elementor team, Do you guys have any solution for it?

  10. How do we customize a featured button? For example, in Elementor website’s nav menu DOWNLOAD has a different style so as to pop out. But in Elementor’s plugin nav menu, such customization becomes difficult.

    Main problem, The text color won’t change even if we specify important in css. Other styling such as background, border etc. works well.

  11. I have a big problem with elementor header builder.
    In the backend the website display the arrow-down, in the front end, the arrow-down not appear.

  12. Hi guys! Please, we need some cool menu customization! I did this menu (eldeck.cl) and it took Me a lot of time. I had used other plugins to achieve that! I also needed to create one menu for each menu item. I think you guys could bring some nice menu features like salient theme has!

  13. The main problem with all the toggle or hamburger menus is that they are not accessible to VoiceOver or TalkBack. Today, when web and applications need to comply to ADA, Section 508 and WCAG, this is not good and prevents people from creating accessible websites.

  14. The nav menu is one of the least customisable parts of Elementor. Sure hope it’s on the to do for improvements.

  15. I tried everything, Condiotional menus, Menu Swapper. I’m starting to think it’s better to use another Theme for this. I can’t assign different menus to pages. My header still show one menu …. FFFFFF

    Any idea?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.