{"id":25902,"date":"2019-05-28T08:46:15","date_gmt":"2019-05-28T08:46:15","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=25902"},"modified":"2025-12-05T07:02:45","modified_gmt":"2025-12-05T05:02:45","slug":"custom-navigation-menu","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/","title":{"rendered":"How to Create &amp; Design a Custom Navigation Menu"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"25902\" class=\"elementor elementor-25902\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-56ff538 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"56ff538\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2557ac4\" data-id=\"2557ac4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3eb0469 elementor-widget elementor-widget-text-editor\" data-id=\"3eb0469\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to creating good website UI, the <a href=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\">navigation menu<\/a> 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&#8217;s all it takes to make them leave.<\/p><p>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.<\/p><p>If you want to design a good-looking menu for your site, you have a few options. The first is by using WordPress&#8217; default menu editor \u2014 simple but gets the job done \u2014 or by designing a highly customizable menu with\u00a0<a href=\"https:\/\/elementor.com\/widgets\/nav-menu-widget\/\" target=\"_blank\" rel=\"noopener\">Elementor&#8217;s Nav Menu widget<\/a>.<\/p><p>In the following post, we will go over step-by-step instructions on two ways of <a href=\"https:\/\/elementor.com\/blog\/wordpress-nav-menu-design\/\">creating a menu in WordPress<\/a>, one in the default editor, and the other with Elementor. Just follow these instructions and you&#8217;ll have your own beautiful menu in no time.<\/p><p><a href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\">See here to learn how to build a Mega Menu with Elementor<\/a><\/p><p>(Note that you\u2019ll 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.)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fdfd9b2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fdfd9b2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7e6ae26\" data-id=\"7e6ae26\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-617b7a1 elementor-widget elementor-widget-heading\" data-id=\"617b7a1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creating a Navigation Menu in WordPress\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d008bdb elementor-widget elementor-widget-text-editor\" data-id=\"d008bdb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By default, you don\u2019t 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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-67e5050 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"67e5050\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fdeb9d0\" data-id=\"fdeb9d0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-149a2d1 elementor-widget elementor-widget-heading\" data-id=\"149a2d1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Create a Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-959d731 elementor-widget elementor-widget-text-editor\" data-id=\"959d731\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s first make a simple menu from the WordPress dashboard. Log into your backend and head to <em>Appearance &gt; Menus<\/em>, located on the sidebar. Look for <em>Menu Name<\/em> and type in the title of your new navigation menu, then click the big blue button to create it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72e6cca elementor-widget elementor-widget-image\" data-id=\"72e6cca\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"142\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=142\/blog\/wp-content\/uploads\/2019\/05\/2-1024x182.png\" class=\"attachment-large size-large wp-image-25920\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/2.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/2-300x53.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/2-768x137.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b7fb25 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b7fb25\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-74b958a\" data-id=\"74b958a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-77e18cd elementor-widget elementor-widget-heading\" data-id=\"77e18cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Add and Customize Navigation Menu Items<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c73c7d8 elementor-widget elementor-widget-text-editor\" data-id=\"c73c7d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Your menu won\u2019t do much unless you specify what\u2019s in it. On the side of the page, you should now see dropdowns with pages, posts, custom links, and categories to choose from.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d05b26c elementor-widget elementor-widget-image\" data-id=\"d05b26c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"292\" height=\"503\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=292,h=503\/blog\/wp-content\/uploads\/2019\/05\/menu-items.jpg\" class=\"attachment-large size-large wp-image-25926\" alt=\"menu-items\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=292\/blog\/wp-content\/uploads\/2019\/05\/menu-items.jpg 292w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=174\/blog\/wp-content\/uploads\/2019\/05\/menu-items-174x300.jpg 174w\" sizes=\"(max-width: 292px) 100vw, 292px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d74b684 elementor-widget elementor-widget-text-editor\" data-id=\"d74b684\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Just click the checkbox next to any page you want to add and click <em>Add to Menu<\/em>. Make sure to click use the <em>View All<\/em> tab, or the search function if you have too many pages.<\/p><p>Once you&#8217;ve added a few items, you&#8217;ll need to include some info by clicking the arrow next to each element under <em>Menu Structure<\/em>.<\/p><ul><li><strong>Navigation Label \u2013<\/strong> The title of the link, displayed within your menu. Example: \u201cStore\u201d, \u201cGallery\u201d, and \u201cAbout\u201d.<\/li><\/ul><ul><li><strong>Title Attribute<\/strong> \u2013 Text that appears on mouse hover over that menu item.<\/li><\/ul><ul><li><strong>Open Link in New Window<\/strong> \u2013 Generally, leave this off unless linking to a third-party site.<\/li><\/ul><ul><li><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26505\">CSS<\/a> Classes<\/strong> \u2013 Add a little padding, bold the text, and so on using CSS.<\/li><\/ul><ul><li><a href=\"https:\/\/codex.wordpress.org\/Links_Add_New_Screen#XFN_Relationship_Definitions\"><strong>Link Relationship<\/strong><\/a>\u2013 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.<\/li><\/ul><ul><li><strong>Description<\/strong> \u2013 A short description of the menu item that displays if your theme supports it.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6262eab elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6262eab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d59f9c1\" data-id=\"d59f9c1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-11946d4 elementor-widget elementor-widget-heading\" data-id=\"11946d4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Change the Nav Menu Structure<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72d5f36 elementor-widget elementor-widget-text-editor\" data-id=\"72d5f36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you\u2019ve fleshed out all your menu items, your job isn\u2019t 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.<\/p><p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37d416a elementor-widget elementor-widget-image\" data-id=\"37d416a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"266\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=266\/blog\/wp-content\/uploads\/2019\/05\/2-1-1024x340.png\" class=\"attachment-large size-large wp-image-25931\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/2-1.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/2-1-300x100.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/2-1-768x255.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bd7cef elementor-widget elementor-widget-text-editor\" data-id=\"3bd7cef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can use the same method to change the order of your menu items to your desired sequence.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1fa007e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1fa007e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-88b5d1c\" data-id=\"88b5d1c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-70b2f5c elementor-widget elementor-widget-heading\" data-id=\"70b2f5c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Publish Your Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72c46b1 elementor-widget elementor-widget-text-editor\" data-id=\"72c46b1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the menu editor screen, go to the <em>Manage Locations<\/em> tab and click the checkbox where you want to add your new menu. The available options depend on your theme, but generally, you\u2019ll want to tick <em>Primary Menu<\/em> or <em>Top Menu<\/em>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b4bf69 elementor-widget elementor-widget-image\" data-id=\"4b4bf69\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"281\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=281\/blog\/wp-content\/uploads\/2019\/05\/locations-1024x360.jpg\" class=\"attachment-large size-large wp-image-25937\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/locations-1024x360.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/locations-300x106.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/locations-768x270.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1077\/blog\/wp-content\/uploads\/2019\/05\/locations.jpg 1077w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9027b15 elementor-widget elementor-widget-text-editor\" data-id=\"9027b15\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can find the same settings at the bottom of the main menu screen in the form of checkboxes.<\/p><p>If this doesn\u2019t work for you, try going to <em>Appearance &gt; Widgets<\/em> and dropping the new Custom Menu or Navigation Menu item where you want it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5832cf2 elementor-widget elementor-widget-image\" data-id=\"5832cf2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"533\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=533\/blog\/wp-content\/uploads\/2019\/05\/3-1024x682.png\" class=\"attachment-large size-large wp-image-25939\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/3.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/3-300x200.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/3-768x512.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2950907 elementor-widget elementor-widget-text-editor\" data-id=\"2950907\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you can\u2019t use either of these options, you may need to switch themes or see if your theme has its own menu editor.<\/p><p>And there you have it: a simple, if not particularly flexible, WordPress menu. Styling it any further will require CSS knowledge.<\/p><p>Is that not good enough for you? Want more customization and control? Read on and we\u2019ll show you how to create a customizable menu with Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e0bce24 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e0bce24\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-15bf2ed\" data-id=\"15bf2ed\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e32fe80 elementor-widget elementor-widget-heading\" data-id=\"e32fe80\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Elementor Pro\u2019s Nav Menu Widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a952628 elementor-widget elementor-widget-text-editor\" data-id=\"a952628\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In order to use the Nav Menu widget, you\u2019ll need to have any version of <a href=\"https:\/\/elementor.com\/pricing\/\">Elementor Pro<\/a> installed. If you\u2019re using the free version, you\u2019ll have to stick with the default WordPress menu or use a third-party.<\/p><p>With Pro you\u2019ll also get access to 300+ templates, a <a href=\"https:\/\/elementor.com\/blog\/customize-your-theme\/\">builder for Themes<\/a>, <a href=\"https:\/\/elementor.com\/blog\/woocommerce-tutorial\/\">WooCommerce sites<\/a>, and <a href=\"https:\/\/elementor.com\/blog\/exit-intent-popup-examples\/\">marketing Popups<\/a>, more animations for your site, and extra widgets just for WooCommerce users.<\/p><p>And don\u2019t forget the other pro widgets like a Posts List, Call-to-Action button, Reviews, Countdown, and various Facebook Blocks alongside the Nav Menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbe4999 elementor-widget elementor-widget-image\" data-id=\"fbe4999\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"461\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=461\/blog\/wp-content\/uploads\/2019\/05\/4-1024x590.png\" class=\"attachment-large size-large wp-image-25941\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/4.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/4-300x173.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/4-768x443.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a5778e elementor-widget elementor-widget-text-editor\" data-id=\"6a5778e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">The Nav Menu widget itself comes with extensive features:<\/span><\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">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.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add as many menus on a site or page as you like.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Easily add elegant hover animations.<\/span><\/li><li style=\"font-weight: 400\"><a href=\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\"><span style=\"font-weight: 400\">Mobile responsiveness<\/span><\/a><span style=\"font-weight: 400\"> and the ability to customize how your menu looks on computers, tablets, and phones.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Tweak <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26506\">typography<\/a>, color, and other design elements.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Pixel-perfect precision with padding, spacing, and align options.<\/span><\/li><\/ul><p><span style=\"font-weight: 400\">Now we&#8217;re going to show you how to use all of these with the Nav Menu widget.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-85627c2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"85627c2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d24e540\" data-id=\"d24e540\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d056c9 elementor-widget elementor-widget-heading\" data-id=\"1d056c9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Make a Nav Menu in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f80e30 elementor-widget elementor-widget-text-editor\" data-id=\"1f80e30\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As mentioned above, to get started, you\u2019re going to need to have a default WordPress menu already created. Make sure to follow the tips above to learn how.<\/p><p>If your WordPress menu is done, it\u2019s 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 <a href=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\">header<\/a>). Here, look for the <em>Nav Menu<\/em> widget and add it to your desired location.<\/p><p>Once finished, your WordPress menu is now editable in Elementor \u2014 time to get customizing!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8c205be elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8c205be\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bfb0aa5\" data-id=\"bfb0aa5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-89a14d7 elementor-widget elementor-widget-heading\" data-id=\"89a14d7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Layout and Animations<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fef3d6f elementor-widget elementor-widget-text-editor\" data-id=\"fef3d6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>On the left-hand sidebar, you should see three tabs: Content, Style, and Advanced. The first thing you should do, if it\u2019s not already done, is to go to <em>Content <\/em>and change <em>Menu <\/em>to the one you want to display. This allows you to see it in the preview screen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f35e735 elementor-widget elementor-widget-image\" data-id=\"f35e735\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=421\/blog\/wp-content\/uploads\/2019\/05\/nav-menu-widget-1024x539.jpg\" class=\"attachment-large size-large wp-image-25943\" alt=\"nav-menu-widget\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/nav-menu-widget-1024x539.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/nav-menu-widget-300x158.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/nav-menu-widget-768x404.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1304\/blog\/wp-content\/uploads\/2019\/05\/nav-menu-widget.jpg 1304w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f87af2 elementor-widget elementor-widget-text-editor\" data-id=\"7f87af2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Under <em>Layout, <\/em>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. <em>Align<\/em> lets you change the alignment of your menu items.<\/p><p>You also have quite a few options when it comes to <a href=\"https:\/\/elementor.com\/blog\/how-to-use-motion-effects\/\">animations<\/a>. These include under-, over-, and double-line animations as well as framed, background, and subtle text animations.<\/p><p>Click the <em>Pointer <\/em>dropdown to select the type you want. Then click on <em>Animation <\/em>to see the individual options. There are some examples in action <a href=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\">here<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf4f109 elementor-widget elementor-widget-image\" data-id=\"cf4f109\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"540\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/menu-underline.gif\" class=\"attachment-large size-large wp-image-25946\" alt=\"menu-underline\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c33ba4 elementor-widget elementor-widget-text-editor\" data-id=\"2c33ba4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <em>Submenu Indicator<\/em> changes how submenus\u2019 arrow icons are displayed. To customize submenus a little more, go to the <em>Style <\/em>tab and uncollapse <em>Dropdown<\/em>. Change how they act on normal and hover states, customize typography, add a border, shadow, or divider, and of course tweak the padding.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b10cf62 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b10cf62\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cb5809d\" data-id=\"cb5809d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-74b2dc1 elementor-widget elementor-widget-heading\" data-id=\"74b2dc1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Colors and Spacing<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb5ba0a elementor-widget elementor-widget-text-editor\" data-id=\"eb5ba0a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once you have your menu layout how you like it, it\u2019s time to customize it a little more with color and padding tweaks. Go to the <em>Style <\/em>tab and uncollapse <em>Main Menu<\/em>. Here, you control everything about the design of your menu items.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a661a64 elementor-widget elementor-widget-image\" data-id=\"a661a64\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"469\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=280,h=469\/blog\/wp-content\/uploads\/2019\/05\/main-menu.jpg\" class=\"attachment-large size-large wp-image-25949\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=280\/blog\/wp-content\/uploads\/2019\/05\/main-menu.jpg 280w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=179\/blog\/wp-content\/uploads\/2019\/05\/main-menu-179x300.jpg 179w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-363bc87 elementor-widget elementor-widget-text-editor\" data-id=\"363bc87\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Switch on <\/span><i><span style=\"font-weight: 400\">Typography <\/span><\/i><span style=\"font-weight: 400\">to edit the text size, font, weight, set it to all upper\/lowercase, and tweak the styling \u2014 with individual choices for each type of device. Make your text larger on mobile, a different color entirely on desktop, anything you like.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-396fed3 elementor-widget elementor-widget-image\" data-id=\"396fed3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"429\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=262,h=429\/blog\/wp-content\/uploads\/2019\/05\/unnamed.png\" class=\"attachment-large size-large wp-image-25951\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=262\/blog\/wp-content\/uploads\/2019\/05\/unnamed.png 262w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=183\/blog\/wp-content\/uploads\/2019\/05\/unnamed-183x300.png 183w\" sizes=\"(max-width: 262px) 100vw, 262px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35d106a elementor-widget elementor-widget-text-editor\" data-id=\"35d106a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Use the <em>Text Color and<\/em>\u00a0<em>Pointer <\/em>options to customize the color of your menu links while normal, hovered, and when it&#8217;s the active page. Use the <em>Hover <\/em>and <em>Active<\/em> buttons to edit the different states.<\/p><p>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.<\/p><ul><li><strong>Line-Height\u00a0<\/strong>\u2013 This changes the height of the line, the padding above and below text, similar to vertical padding<\/li><li><strong>Letter Spacing\u00a0<\/strong>\u2013\u00a0Higher values mean more spacing between each letter.<\/li><li><strong>Pointer Width\u00a0<\/strong>\u2013 The thickness of the lines that appear on hover and when a menu item is active.<\/li><li><strong>Horizontal Padding <\/strong>\u2013 This is the space between each menu item, or between the menu items and the column edges if you&#8217;re using vertical layout.<\/li><li><strong>Vertical Padding\u00a0<\/strong>\u2013\u00a0Conversely, this is the space between the top and bottom of the column, or the menu items if you&#8217;re using vertical layout.<\/li><li><strong>Space Between\u00a0<\/strong>\u2013\u00a0Use this value to put more space between each menu item.<\/li><li><strong>Border Radius\u00a0<\/strong>\u2013\u00a0This adds rounded corners if you have a background color.<\/li><\/ul><p>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.<\/p><p>And finally, the <em>Advanced <\/em>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c61f6d8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c61f6d8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5baa996\" data-id=\"5baa996\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d8fa5c8 elementor-widget elementor-widget-heading\" data-id=\"d8fa5c8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Configuring Your Mobile Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11e6945 elementor-widget elementor-widget-text-editor\" data-id=\"11e6945\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Nav Menu widget also comes with some mobile options under the <em>Layout <\/em>tab, to optimize your menu on smaller devices. Here\u2019s the list of options explained:<\/p><ul><li><strong>Breakpoint \u2013 <\/strong>When does your menu layout change to better suit smaller devices? At tablet or mobile resolution?<\/li><li><strong>Full Width<\/strong> \u2013 Turn this on, and the mobile menu will stretch across the screen rather than just across the column width of your nav menu.<\/li><li><strong>Align<\/strong> \u2013 Center the mobile menu links, or have them appear to the side.<\/li><li><strong>Toggle<\/strong> \u2013 Keep the hamburger menu (three lines) indicator, or turn it off entirely for mobile.<\/li><li><strong>Toggle Align<\/strong> \u2013 Align the hamburger icon center, left, or right.<\/li><\/ul><p>Under the <em>Style <\/em>tab, you\u2019ll find options to change the appearance of the mobile menu toggle as well (<em>Toggle Button<\/em>), customize the color, background, change the size, and add a border.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54bef2f elementor-widget elementor-widget-image\" data-id=\"54bef2f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=421\/blog\/wp-content\/uploads\/2019\/05\/mobile-1024x539.jpg\" class=\"attachment-large size-large wp-image-25957\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/mobile-1024x539.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/mobile-300x158.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/mobile-768x404.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1304\/blog\/wp-content\/uploads\/2019\/05\/mobile.jpg 1304w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fb2b3d elementor-widget elementor-widget-text-editor\" data-id=\"8fb2b3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d4d1b8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d4d1b8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cf4fe8c\" data-id=\"cf4fe8c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c116e4 elementor-widget elementor-widget-heading\" data-id=\"1c116e4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Final Thoughts: Custom Nav Menus in Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b2555b elementor-widget elementor-widget-text-editor\" data-id=\"5b2555b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are several ways to create a custom nav menu in WordPress. As you\u2019ve seen, the default settings of the platform do its job and are easy to use.<\/p>\n<p>However, if you feel like your menu is missing something, or it isn\u2019t quite as flexible as you need it to be, the&nbsp;<a href=\"https:\/\/elementor.com\/widgets\/nav-menu-widget\/\" target=\"_blank\">Elementor Nav Menu widget<\/a>&nbsp;might be the better choice for you.<\/p>\n<p>It makes creating and customizing menus a simple task, is flexible, and full of potential. In short, it doesn\u2019t just do the job \u2014 it finishes it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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&#8217;s Nav Menu widget.\u200b<\/p>\n","protected":false},"author":9628,"featured_media":25959,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,32,43],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-25902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-design","category-wordpress","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create &amp; Design a Custom Navigation Menu<\/title>\n<meta name=\"description\" content=\"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor&#039;s Nav Menu widget\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create &amp; Design a Custom Navigation Menu\" \/>\n<meta property=\"og:description\" content=\"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor&#039;s Nav Menu widget\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-28T08:46:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-05T05:02:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nick Sch\u00e4ferhoff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Sch\u00e4ferhoff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\"},\"author\":{\"name\":\"Nick Sch\u00e4ferhoff\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/7d8909e8594b46aa301e5bcda745590e\"},\"headline\":\"How to Create &amp; Design a Custom Navigation Menu\",\"datePublished\":\"2019-05-28T08:46:15+00:00\",\"dateModified\":\"2025-12-05T05:02:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\"},\"wordCount\":1949,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Elementor\",\"Web Design\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\",\"url\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\",\"name\":\"How to Create & Design a Custom Navigation Menu\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg\",\"datePublished\":\"2019-05-28T08:46:15+00:00\",\"dateModified\":\"2025-12-05T05:02:45+00:00\",\"description\":\"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor's Nav Menu widget\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg\",\"width\":1024,\"height\":536,\"caption\":\"Navigation Menu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create &amp; Design a Custom Navigation Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/7d8909e8594b46aa301e5bcda745590e\",\"name\":\"Nick Sch\u00e4ferhoff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g\",\"caption\":\"Nick Sch\u00e4ferhoff\"},\"description\":\"Nick Sch\u00e4ferhoff 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.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/nschaeferhoff\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create & Design a Custom Navigation Menu","description":"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor's Nav Menu widget","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/","og_locale":"en_US","og_type":"article","og_title":"How to Create & Design a Custom Navigation Menu","og_description":"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor's Nav Menu widget","og_url":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-05-28T08:46:15+00:00","article_modified_time":"2025-12-05T05:02:45+00:00","og_image":[{"width":1024,"height":536,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg","type":"image\/jpeg"}],"author":"Nick Sch\u00e4ferhoff","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Nick Sch\u00e4ferhoff","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/"},"author":{"name":"Nick Sch\u00e4ferhoff","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/7d8909e8594b46aa301e5bcda745590e"},"headline":"How to Create &amp; Design a Custom Navigation Menu","datePublished":"2019-05-28T08:46:15+00:00","dateModified":"2025-12-05T05:02:45+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/"},"wordCount":1949,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg","keywords":["Build","Video"],"articleSection":["Elementor","Web Design","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/custom-navigation-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/","url":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/","name":"How to Create & Design a Custom Navigation Menu","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg","datePublished":"2019-05-28T08:46:15+00:00","dateModified":"2025-12-05T05:02:45+00:00","description":"This step-by-step guide will show you how to create a highly customizable navigation menu for your WordPress site using Elementor's Nav Menu widget","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/custom-navigation-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Image-from-iOS-5-1.jpg","width":1024,"height":536,"caption":"Navigation Menu"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/custom-navigation-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Create &amp; Design a Custom Navigation Menu"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/7d8909e8594b46aa301e5bcda745590e","name":"Nick Sch\u00e4ferhoff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b66b3d829a78dc79fc182cedf1bf7c7d2a16017fc662b637ad7aa05365341f60?s=96&d=mm&r=g","caption":"Nick Sch\u00e4ferhoff"},"description":"Nick Sch\u00e4ferhoff 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.","url":"https:\/\/elementor.com\/blog\/author\/nschaeferhoff\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/9628"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=25902"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25902\/revisions"}],"predecessor-version":[{"id":146678,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25902\/revisions\/146678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/25959"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=25902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=25902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=25902"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=25902"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=25902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}