{"id":47078,"date":"2021-01-11T12:29:57","date_gmt":"2021-01-11T12:29:57","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=47078"},"modified":"2021-01-11T12:29:57","modified_gmt":"2021-01-11T12:29:57","slug":"create-draggable-nav-menu","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/","title":{"rendered":"Elementor Team Writes: How to Create a Draggable Nav Menu With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"47078\" class=\"elementor elementor-47078\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3934496 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3934496\" 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-fdcc6b1\" data-id=\"fdcc6b1\" 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-5df96f9 elementor-widget elementor-widget-text-editor\" data-id=\"5df96f9\" 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><b>About the author: Alan Kaler, Elementorist @ Elementor<\/b><\/p><p>Alan is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you<\/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-c69e960 elementor-widget elementor-widget-text-editor\" data-id=\"c69e960\" 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>One of the things that makes Elementor so versatile is that the built-in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/widgets\/\"   title=\"widgets\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"3920\">widgets<\/a> are really just a starting point for what you can build with Elementor. With a few tweaks and some creativity, you can expand on a widget&#8217;s default settings and achieve even more interesting designs and better results for your website.<\/p>\n<p>So what&#8217;s one example of this type of creative use? Well, you could use the Tabs widget in a different way to create a great-looking testimonial section (this will be my next post &#8211; don&#8217;t miss it!).<\/p>\n<p>But in today&#8217;s post, I&#8217;m going to focus on another widget \u2014 the <a href=\"https:\/\/elementor.com\/widgets\/nav-menu-widget\/\" target=\"_blank\" rel=\"noopener\">Nav Menu widget<\/a>. You might&#8217;ve already used the Nav Menu widget in the header or footer of your site, as it&#8217;s what most people use to create their website navigation. But with some creativity, your site can also benefit from using the Nav Menu widget in other spots, which is what we&#8217;re going to do in this post.<\/p>\n<p>Specifically, I&#8217;m going to show you how to use the regular Nav Menu widget to create an engaging draggable navigation menu for your visitors. You can check out what the end result looks like in the example below and keep reading to learn exactly how to set it up:<\/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-2f43984 elementor-widget elementor-widget-video\" data-id=\"2f43984\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&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=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2021\/01\/Draggable-nav-menu3-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\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-5803fee1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5803fee1\" 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-3df8d3f7\" data-id=\"3df8d3f7\" 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-5f2f64da elementor-align-center elementor-widget elementor-widget-button\" data-id=\"5f2f64da\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Prefer a Sidebar Menu? Learn How To Create One<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\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-d538c29 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d538c29\" 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-9b77ab4\" data-id=\"9b77ab4\" 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-d975be5 elementor-widget elementor-widget-heading\" data-id=\"d975be5\" 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\">What Is a Draggable Navigation Menu?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-195ce0a elementor-widget elementor-widget-text-editor\" data-id=\"195ce0a\" 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>A draggable menu looks just like a regular menu at first glance. However, the key difference is that it allows visitors to move it by clicking on it and dragging it anywhere within the viewport.<\/p><p>You can place the draggable menu anywhere on your site, and you&#8217;ll also have full control over exactly which items show up in the menu.\u00a0<\/p><p>For example, you could use it as an <a href=\"https:\/\/elementor.com\/blog\/portfolio-website\/\" target=\"_blank\" rel=\"noopener\">interesting way to showcase links<\/a> to your individual portfolio items on a portfolio page. Or, if you <a href=\"https:\/\/elementor.com\/blog\/woocommerce-tutorial\/\" target=\"_blank\" rel=\"noopener\">have a WooCommerce store<\/a>, you could use it to drive traffic to different categories of products, which is what I&#8217;ve done for the example above.<br \/><span>Here&#8217;s another creative example of a draggable menu, featured in Codrops:<\/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-b147b2a elementor-widget elementor-widget-image\" data-id=\"b147b2a\" 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\t<a href=\"https:\/\/tympanus.net\/Development\/DraggableMenu\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/draggable_menu_example-r4q74nlkdfdv4psf0wysp315kd6rnwsxj3j6fntqwc.png\" title=\"draggable_menu_example\" alt=\"draggable_menu_example\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-634a596 elementor-widget elementor-widget-heading\" data-id=\"634a596\" 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\">The Benefits of Using a Draggable Navigation Menu\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f1ed24 elementor-widget elementor-widget-text-editor\" data-id=\"4f1ed24\" 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>A draggable navigation menu can help you both create a more visually-engaging experience with its unique effect and also improve the utility of your site by making it easier for visitors to find content.\u00a0<\/p><p>Here are some of the benefits that you can achieve with a draggable navigation menu:<\/p><ul><li>Create a more striking, eye-catching element to guide your users where to click.<\/li><li>Highlight important content to drive users toward it and generate more sales.<\/li><li>Improve your brand perception by creating an interesting, memorable design.<\/li><li>Reduce support burden\/lost revenue by making it easier for users to reach their goals.<\/li><li>Increase user satisfaction by creating a better, more easily-navigable web experience.<\/li><li>Lower the bounce rate on your site by making it easier for users to find content.<\/li><\/ul>\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-eea5700 elementor-widget elementor-widget-heading\" data-id=\"eea5700\" 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 Create a Draggable Navigation Menu With Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c17a62 elementor-widget elementor-widget-text-editor\" data-id=\"8c17a62\" 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>Now, I&#8217;ll get into the fun part \u2014 how you can create your own draggable navigation menu for your WordPress site using <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> and <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\">Elementor Pro<\/a>.\u00a0<\/p><p>To set this up, you will need to use some JavaScript, so this tutorial is a bit on the technical side. However, I&#8217;ll give you all the code you need and show you every step, so you should be able to follow along with this tutorial no matter what level of knowledge you&#8217;re at.<\/p><p>In total, here&#8217;s everything that you&#8217;re going to need to create your draggable menu:<\/p><ul><li><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\"><strong>Elementor Pro<\/strong><\/a> &#8211; you need this so that you can access <a href=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\" target=\"_blank\" rel=\"noopener\">the Nav Menu widget<\/a>.<\/li><li><strong>One page that you create with Elementor<\/strong> &#8211; this is where you&#8217;ll include your draggable navigation menu. You could either add it to an existing page or create a brand new page.<\/li><li><strong>One WordPress menu<\/strong> &#8211; this controls the navigation items in your draggable menu and you&#8217;ll create this using the native WordPress menu area (<strong>Appearance \u2192 Menus<\/strong>).<\/li><li><strong>Three to four background images for your menu<\/strong> &#8211; these are optional, but having background images makes for a more interesting aesthetic (as you can see in the example above).<\/li><li><strong>Some JavaScript code<\/strong> &#8211; I&#8217;ll provide the exact code in the tutorial &#8211; all you need to do is copy and paste it (and I&#8217;ll also explain how you can tweak it by modifying the parameters if needed).<\/li><\/ul><p>With respect to the JavaScript code, we&#8217;re going to use <a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener\">the jQuery UI library<\/a>. This library is a curated set of user interface interactions, effects, widgets, and themes that are all built on top of the jQuery JavaScript library.<\/p><p>Ready to get started? Keep reading to learn how to put all of those elements together to create your 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-afdea00 elementor-widget elementor-widget-heading\" data-id=\"afdea00\" 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 Regular WordPress Menu\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be645b3 elementor-widget elementor-widget-text-editor\" data-id=\"be645b3\" 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>To get started, you need to create a regular WordPress menu to house the navigation items you want to include in your draggable menu. This lets you separate the items in your draggable menu from your existing primary navigation menus.<\/p><p>In your WordPress dashboard, go to <strong>Appearance \u2192 Menus<\/strong> and create a new menu. Then, add the menu items that you want to include in your draggable menu. Below, you can see how I&#8217;ve configured the menu that I used for the demo above:<\/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-3e21704 elementor-widget elementor-widget-image\" data-id=\"3e21704\" 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\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/create-new-wordpress-menu-r4q70vavyyan94k3johqhyq0ag90mr1y4cogim47qw.png\" title=\"create new wordpress menu\" alt=\"create new wordpress menu\" loading=\"lazy\" \/>\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-02daa34 elementor-widget elementor-widget-heading\" data-id=\"02daa34\" 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. Create a New Page and Edit With Elementor\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbe3b4c elementor-widget elementor-widget-text-editor\" data-id=\"fbe3b4c\" 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&#8217;ve saved your menu, create a new page (<strong>Pages \u2192 Add New<\/strong>) and then select the option to <strong>Edit With Elementor<\/strong>. This is the page that&#8217;s going to include your draggable 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-cad7528 elementor-widget elementor-widget-heading\" data-id=\"cad7528\" 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. Create a Full-Width Section\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5920eac elementor-widget elementor-widget-text-editor\" data-id=\"5920eac\" 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&#8217;ve launched the Elementor interface, create a new one-column section. Then, open the section&#8217;s settings and make the following configurations in the <strong>Layout<\/strong> tab:<\/p><ul><li><strong>Content Width<\/strong>: Full Width<\/li><li><strong>Height<\/strong>: Fit To Screen<\/li><\/ul>\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-30eb557 elementor-widget elementor-widget-image\" data-id=\"30eb557\" 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\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Create-a-Full-Width-Section-r4q6zjd1sxruuxmgk7plcwa29h259f1l17nq8a10jc.png\" title=\"Create a Full-Width Section\" alt=\"Create a Full-Width Section\" loading=\"lazy\" \/>\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-59a204d elementor-widget elementor-widget-text-editor\" data-id=\"59a204d\" 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>While working here, you can also optionally set a background, insert a header, or add any other elements that you want to go along with your draggable menu. Or, you can always come back here later after you preview how your menu works.<\/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-b2afbd2 elementor-widget elementor-widget-heading\" data-id=\"b2afbd2\" 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. Create an Inner Section\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87dd329 elementor-widget elementor-widget-text-editor\" data-id=\"87dd329\" 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>Next, create an inner section in your full-width section by dragging in the Inner Section widget.<\/p><p>Then, open the settings for the column inside your Inner Section widget and set its <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4419\">CSS<\/a> ID equal to <strong>draggable<\/strong>. To do that:<\/p><ul><li>Go to the <strong>Advanced<\/strong> tab of the column&#8217;s settings.<\/li><li>Enter <strong>draggable<\/strong> in the <strong>CSS ID<\/strong> setting.<\/li><\/ul><p>It should look like this:<\/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-100562d elementor-widget elementor-widget-image\" data-id=\"100562d\" 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\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Inner-section-inside-full-width-section-r4q70lwky3uf55o1nnzmglsphn4vitqjb2ex1rtrra.jpg\" title=\"Inner section inside full-width section\" alt=\"Inner section inside full-width section\" loading=\"lazy\" \/>\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-dbd6232 elementor-widget elementor-widget-image\" data-id=\"dbd6232\" 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=\"299\" height=\"423\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=299,h=423\/blog\/wp-content\/uploads\/2021\/01\/Column-advanced-settings.png\" class=\"attachment-large size-large wp-image-47088\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=299\/blog\/wp-content\/uploads\/2021\/01\/Column-advanced-settings.png 299w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=212\/blog\/wp-content\/uploads\/2021\/01\/Column-advanced-settings-212x300.png 212w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/>\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-a7cc96e elementor-widget elementor-widget-heading\" data-id=\"a7cc96e\" 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\">5. Add the Nav Menu Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b02577a elementor-widget elementor-widget-text-editor\" data-id=\"b02577a\" 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>Now, drag the Nav Menu widget into the Inner Section widget that you just created (remember &#8211; you need Elementor Pro to access the Nav Menu widget).<\/p>\n<p>In the Nav Menu widget&#8217;s settings, use the <strong>Menu<\/strong> drop-down to select the WordPress menu that you created in the first step.&nbsp;<\/p>\n<p>Then, you can use the other settings to style the Nav Menu widget according to your preferences. For some more guidance here, check out our guide to <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" target=\"_blank\" rel=\"noopener\">designing a custom navigation menu<\/a> and <a href=\"https:\/\/elementor.com\/blog\/wordpress-nav-menu-design\/\" target=\"_blank\" rel=\"noopener\">our Monday Masterclass on navigation menu design<\/a>.<\/p>\n<p>Once you&#8217;ve made your choices, go to the <strong>Advanced<\/strong> tab of the widget&#8217;s settings, and open the <strong>Positioning<\/strong> settings. Configure them as follows:<\/p>\n<ul>\n<li><strong>Width<\/strong>: Custom<\/li>\n<\/ul>\n<ul>\n<li><strong>Custom Width<\/strong> &#8211; set to the maximum possible (this will vary depending on your design). The main goal here is to ensure that the menu does not break the line.<\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/elementor.com\/blog\/5-uses-absolute-positioning\/\"><strong>Position<\/strong>: Absolute<\/a><\/li>\n<\/ul>\n<ul>\n<li><strong>Offset (under Horizontal Orientation)<\/strong>: 172 px (this will also vary depending on your design).<\/li>\n<\/ul>\n<p>You can leave the other settings as the defaults. It should look something like this:<\/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-b64008e elementor-widget elementor-widget-image\" data-id=\"b64008e\" 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=\"299\" height=\"569\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=299,h=569\/blog\/wp-content\/uploads\/2021\/01\/Positioning-settings.png\" class=\"attachment-large size-large wp-image-47089\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=299\/blog\/wp-content\/uploads\/2021\/01\/Positioning-settings.png 299w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=158\/blog\/wp-content\/uploads\/2021\/01\/Positioning-settings-158x300.png 158w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/>\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-31d8e59 elementor-widget elementor-widget-heading\" data-id=\"31d8e59\" 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\">6. Add the Custom JavaScript\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f83fb90 elementor-widget elementor-widget-text-editor\" data-id=\"f83fb90\" 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>Now, it&#8217;s time to add the JavaScript code snippet and make the magic happen. This code snippet is what turns your regular navigation menu into a draggable menu.<\/p><p>Create a new section underneath the main section that you&#8217;ve been working in. Then, add the HTML widget.<\/p><p>In the HTML widget&#8217;s settings, add the following JavaScript snippet to the <strong>HTML Code<\/strong> box:<\/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-2d6b647 elementor-widget elementor-widget-code-highlight\" data-id=\"2d6b647\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script src=\"https:\/\/code.jquery.com\/ui\/1.10.4\/jquery-ui.js\"><\/script>\n<script>\njQuery( document ).ready( function ( $ ) {\n$( \"#draggable\" ).draggable({containment: [-2000, 0, 300, 0], axis:'x'});\n});\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7501efe elementor-widget elementor-widget-text-editor\" data-id=\"7501efe\" 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>Here&#8217;s a quick explanation of what the different parameters are doing:<\/p><p><strong>containment: [-3000, 0, 300, 0], axis:&#8217;x&#8217;<\/strong><\/p><p>These allow you to define how far users can drag the menu and along which axis it&#8217;s draggable. With this configuration, visitors can drag the menu left and right (the &#8216;x&#8217; axis) between the bounds that you&#8217;ve set (e.g. <strong>-3000<\/strong> and <strong>300<\/strong>).<\/p><p>Here&#8217;s exactly what each number means:<\/p><p>[containment.left, containment.top, containment.right, containment.bottom]<\/p><p>Axis x= horizontal<\/p><p>If you want, you can edit the numbers to match your unique situation. Or, you could even get creative and change the axis to &#8216;y&#8217; if you want to create a vertical draggable menu.<\/p><p>And that&#8217;s it! Save your page and preview it in your browser to see the effect in action.<\/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-5a89f38 elementor-widget elementor-widget-heading\" data-id=\"5a89f38\" 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\">Create a Unique Navigation Experience <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3be9667 elementor-widget elementor-widget-text-editor\" data-id=\"3be9667\" 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>With Elementor, the default widget behavior is just a starting point for what you can do with your designs. With some tweaking, you can take even simple widgets and turn them into eye-catching showpieces, which is part of what we try to teach you here on the Elementor blog. For example, in September, Roy showed you <a href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" target=\"_blank\" rel=\"noopener\">how to create a sticky sidebar menu with Elementor<\/a>, another unique twist on a navigation menu.<\/p><p>In this post, you&#8217;ve learned how to take the regular Elementor Nav Menu widget and turn it into a visually-appealing and user-friendly draggable navigation menu. Give this technique a try in your next design and let us know how it works.<\/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>A draggable navigation menu can help you create a visually-engaging experience with its unique effect and also makes it easier for visitors to find content. Let&#8217;s show you how to create one, step by step.<\/p>\n","protected":false},"author":507051,"featured_media":47080,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,167,28],"tags":[80],"marketing_persona":[51],"marketing_intent":[49],"class_list":["post-47078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-elementor-team-writes","category-tips-tricks","tag-pro"],"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 a Draggable Nav Menu With Elementor<\/title>\n<meta name=\"description\" content=\"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.\" \/>\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\/create-draggable-nav-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 a Draggable Nav Menu With Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/create-draggable-nav-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=\"2021-01-11T12:29:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-04.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\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=\"Alan Kaler\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931\"},\"headline\":\"Elementor Team Writes: How to Create a Draggable Nav Menu With Elementor\",\"datePublished\":\"2021-01-11T12:29:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/\"},\"wordCount\":1637,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png\",\"keywords\":[\"Pro\"],\"articleSection\":[\"Elementor\",\"Elementor Team Writes\",\"Tips &amp; Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/\",\"url\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/\",\"name\":\"How To Create a Draggable Nav Menu With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png\",\"datePublished\":\"2021-01-11T12:29:57+00:00\",\"description\":\"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Team Writes\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor-team-writes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elementor Team Writes: How to Create a Draggable Nav Menu With Elementor\"}]},{\"@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\/b1549508a459ad0cfb282fb1c7a71931\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\",\"url\":\"https:\/\/elementor.com\/blog\/author\/alan-kaler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create a Draggable Nav Menu With Elementor","description":"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.","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\/create-draggable-nav-menu\/","og_locale":"en_US","og_type":"article","og_title":"How To Create a Draggable Nav Menu With Elementor","og_description":"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.","og_url":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-01-11T12:29:57+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-04.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Alan Kaler"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/b1549508a459ad0cfb282fb1c7a71931"},"headline":"Elementor Team Writes: How to Create a Draggable Nav Menu With Elementor","datePublished":"2021-01-11T12:29:57+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/"},"wordCount":1637,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png","keywords":["Pro"],"articleSection":["Elementor","Elementor Team Writes","Tips &amp; Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/","url":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/","name":"How To Create a Draggable Nav Menu With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png","datePublished":"2021-01-11T12:29:57+00:00","description":"Learn how to create a draggable navigation menu and impress your site visitors with a visually-engaging experience and easy navigation.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/01\/Create-a-Draggable-Nav-Menu-01.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/create-draggable-nav-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor Team Writes","item":"https:\/\/elementor.com\/blog\/category\/elementor-team-writes\/"},{"@type":"ListItem","position":3,"name":"Elementor Team Writes: How to Create a Draggable Nav Menu With Elementor"}]},{"@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\/b1549508a459ad0cfb282fb1c7a71931","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you","url":"https:\/\/elementor.com\/blog\/author\/alan-kaler\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/47078","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\/507051"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=47078"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/47078\/revisions"}],"predecessor-version":[{"id":92006,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/47078\/revisions\/92006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/47080"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=47078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=47078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=47078"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=47078"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=47078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}