{"id":2828,"date":"2021-06-22T11:49:17","date_gmt":"2021-06-22T11:49:17","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2828"},"modified":"2023-02-21T10:58:11","modified_gmt":"2023-02-21T10:58:11","slug":"how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/","title":{"rendered":"How to Use Elementor&#8217;s Nav Menu Widget to Design WordPress Custom Menus"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2828\" class=\"elementor elementor-2828\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c14f573 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c14f573\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-678d9cb4\" data-id=\"678d9cb4\" 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-548aaddf elementor-widget elementor-widget-video\" data-id=\"548aaddf\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=2fDp5coQQAM&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\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-1eb89d82 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1eb89d82\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-4fe1203\" data-id=\"4fe1203\" 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-7b0b8be9 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7b0b8be9\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2061\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2062\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2062\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2061\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2061\" tabindex=\"0\" hidden=\"false\"><p>In this video, you will learn how to use Elementor&#8217;s Nav Menu widget to customize WordPress menus. Change colors of the menu items, create mobile menus, customize the submenu and other important points you should know about this highly customizable widget.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2062\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2062\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2062\" tabindex=\"0\" hidden=\"hidden\"><p>[Music]<br \/>in this video I&#8217;m going to show you how<br \/>to set up the nav menu widget so I have<br \/>the nav menu right here and the first<br \/>choice that I can see is the choice of<br \/>which menu to display so I&#8217;ll choose<br \/>this one and these are menus that are<br \/>created on WordPress and they are drawn<br \/>into this widget<br \/>next I can choose horizontal vertical<br \/>and drop-down I&#8217;ll show you examples of<br \/>the other layouts in a little while and<br \/>I can choose to align it to any side or<br \/>spread it throughout the column so let&#8217;s<br \/>align it to the right pointer this is<br \/>the mark that appears on hover and when<br \/>the item is active so this example shows<br \/>underline let&#8217;s show another example<br \/>which is framed and you can play around<br \/>with the different pointers each pointer<br \/>has a set of animations this is the fade<br \/>one and you can also choose a different<br \/>one like grow let&#8217;s stick to fade I also<br \/>have a submenu indicator this it&#8217;s lit<br \/>the little angle icon right here and I<br \/>can choose to show a plus and any of the<br \/>other submenu and indicators next we<br \/>have the mobile drop-down setting now if<br \/>I want the mobile menu to be displayed<br \/>on tablet devices and lower<br \/>I choose tablet and this way when I<br \/>switch to tablet I see the mobile menu<br \/>however if I choose mobile devices the<br \/>lower it means the tablet will still<br \/>show the regular desktop menu and only<br \/>if I go to the mobile view then I will<br \/>see the mobile menu so let&#8217;s switch back<br \/>to tablet and tablet breakpoint so now<br \/>when I open the menu it opens in the<br \/>same column but what if I want it to<br \/>show in the full width this is why I<br \/>have the full width option and when I<br \/>switch it on the menu items take<br \/>the whole screen and are on top of the<br \/>section below it if I close the menu it<br \/>is still situated in the right column<br \/>so for the menu I can choose the<br \/>alignment of the menu items either to<br \/>center or side and have the toggle<br \/>butter button either show the burger or<br \/>already display the menu items<br \/>I can also show the toggle alignment to<br \/>the left center or right next I want to<br \/>show you the styling options so I&#8217;ll<br \/>switch back to desktop view and go to<br \/>the style tab I can change the menu item<br \/>style for normal hover and active state<br \/>to understand what each state means I&#8217;ll<br \/>change the active state to green for the<br \/>text color and pointer color now you see<br \/>that the home button that I&#8217;m currently<br \/>on is green while the other links are<br \/>blue we can also set the typography<br \/>style and change the pointer width to<br \/>make the pointer here more wide and I<br \/>can change the horizontal padding and<br \/>this changes the width of the pointer<br \/>and to explain how it works if I reduce<br \/>this to zero and then increase the space<br \/>between the items I can see that the<br \/>pointer width it is exactly the same<br \/>width as the text I can also change the<br \/>vertical padding which affects the<br \/>distance between the pointer and the<br \/>text so if I reduce it you see that the<br \/>pointer is really close to the text next<br \/>we have the drop down menu now this menu<br \/>effects both the sub menu and the mobile<br \/>menu so to see it in action I&#8217;ll switch<br \/>to tablet view now I can change the<br \/>normal and hover state and change the<br \/>text color background color typography<br \/>add a border type and border radius set<br \/>a box shadow change the horizontal<br \/>padding which is the distance between<br \/>the text and the sides and vertical<br \/>padding affecting the height of the<br \/>whole menu I can set the divider right<br \/>now it&#8217;s dotted that you can set it to<br \/>solid change its color and border width<br \/>and for the whole menu change the<br \/>distance from the top and let&#8217;s switch<br \/>the toggle button to Berger and then we<br \/>can set the toggle button design for<br \/>both normal and hover I can change the<br \/>color the background color<br \/>to create this negative effect change<br \/>the size the border width and the border<br \/>radius here are some other examples of<br \/>the kind of menus you can create with<br \/>this widget for vertical menus I<br \/>recommend using either background or<br \/>text pointers because if I choose let&#8217;s<br \/>say underlined it doesn&#8217;t really look<br \/>quite as good this type of menu is very<br \/>popular for design and fashion related<br \/>sites next is an example of a drop-down<br \/>menu that is great for the minimalistic<br \/>view notice that for content and style<br \/>we only have the option for drop-down<br \/>and not for main menu this is because we<br \/>only set the drop-down menu here is<br \/>another example of the vertical menu now<br \/>this effect is easily done by setting<br \/>the size to a large size and choosing a<br \/>color with opacity and on content<br \/>setting the animation to grow and then<br \/>you get this nice semi-transparent<br \/>effect finally we have this horizontal<br \/>menu and I want to show you how you can<br \/>quickly change the effect by reducing<br \/>the vertical padding and increasing the<br \/>border radius I can quickly turn it into<br \/>sort of button menu I hope by now you<br \/>better understand how to use the nav<br \/>menu widget in Elementor for more<br \/>tutorials be sure to subscribe to this<br \/>YouTube channel until next time this is<br \/>Dan from<br \/>[Music]<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\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>Overview Transcript Overview In this video, you will learn how to use Elementor\u2019s Nav Menu widget to customize WordPress menus. Change colors of the menu items, create mobile menus, customize the submenu and other important points you should know about this highly customizable widget. Transcript [Music] in this video I\u2019m going to show you how [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3383,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Elementor&#039;s Nav Menu Widget to Design WordPress Custom Menus - Academy<\/title>\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\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Elementor&#039;s Nav Menu Widget to Design WordPress Custom Menus - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this video, you will learn how to use Elementor\u2019s Nav Menu widget to customize WordPress menus. Change colors of the menu items, create mobile menus, customize the submenu and other important points you should know about this highly customizable widget. Transcript [Music] in this video I\u2019m going to show you how [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T11:49:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:58:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor's Nav Menu Widget to Design WordPress Custom Menus - Academy","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\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor's Nav Menu Widget to Design WordPress Custom Menus - Academy","og_description":"Overview Transcript Overview In this video, you will learn how to use Elementor\u2019s Nav Menu widget to customize WordPress menus. Change colors of the menu items, create mobile menus, customize the submenu and other important points you should know about this highly customizable widget. Transcript [Music] in this video I\u2019m going to show you how [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/","og_site_name":"Academy","article_published_time":"2021-06-22T11:49:17+00:00","article_modified_time":"2023-02-21T10:58:11+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor&#8217;s Nav Menu Widget to Design WordPress Custom Menus","datePublished":"2021-06-22T11:49:17+00:00","dateModified":"2023-02-21T10:58:11+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/"},"wordCount":1030,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/","name":"How to Use Elementor's Nav Menu Widget to Design WordPress Custom Menus - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg","datePublished":"2021-06-22T11:49:17+00:00","dateModified":"2023-02-21T10:58:11+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Nav-Menu-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-nav-menu-widget-to-design-wordpress-custom-menus-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use Elementor&#8217;s Nav Menu Widget to Design WordPress Custom Menus"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2828"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2828\/revisions"}],"predecessor-version":[{"id":9418,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2828\/revisions\/9418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3383"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}