{"id":4380,"date":"2019-01-31T10:00:48","date_gmt":"2019-01-31T10:00:48","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=4380"},"modified":"2024-04-15T19:49:39","modified_gmt":"2024-04-15T19:49:39","slug":"how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/","title":{"rendered":"How to Create a Drop-Down Menu with Mega Menu Widget in Elementor"},"content":{"rendered":"\n

Create a Menu<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > Appearance > Menus<\/em><\/strong> tab and create a new menu by clicking the “Create a new menu<\/strong>” link.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

Type the menu’s name into the corresponding field and press the “Create Menu<\/strong>” button.In the Add menu items<\/strong> tab, select the Pages<\/strong>, Posts<\/strong>, and Custom Links<\/strong> you want to appear in the menu.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

To display the menu on the Custom Post Types<\/strong> pages and\/or Custom Post Type<\/strong> associated items, install and activate the JetEngine<\/i> <\/a> plugin.<\/p><\/div><\/div>\n\n\n\n

\"add<\/a><\/div>\n\n\n\n

Press the “Add to Menu<\/strong>” button. Now, the added items will be displayed in the Menu structure <\/strong>tab.<\/p>\n\n\n\n

At first, the menu\u2019s structure contains only main menu items. To create a sub-item (a child of any item), grab and drag the items to the right under the main item where you want to add sub-items. Select the “Main” option as the Display location<\/strong> in the Menu Settings<\/strong> block.<\/p>\n\n\n\n

\"menu<\/a><\/div>\n\n\n\n

Press the “Save Menu<\/strong>” button.<\/p>\n\n\n\n

Your new menu can be shown anywhere on the page; the list of menu locations depends on the theme active on your site.\u00a0Make sure to activate the Enable JetMenu for the current location<\/strong> toggle in the JetMenu Location Settings<\/strong> tab and click the “Save Menu<\/strong>” button,<\/p>\n\n\n\n

\"<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>

To build your menu from scratch and turn off the previously developed menus, navigate to the WordPress Dashboard > Crocoblock > JetPlugins > JetMenu > General Settings<\/i> <\/strong> tab and enable the Revamp Menu toggle.<\/p><\/div><\/div>\n\n\n\n

\"revamp<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Arrange the Menu\u2019s Items<\/strong><\/h2>\n\n\n\n
\n

The menu\u2019s items are arranged according to the order they were added. To rearrange the order, unroll the needed item and move it up or down by clicking the corresponding buttons.<\/p>\n\n\n\n

\"rearranging<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add the Mega Content<\/strong><\/h2>\n\n\n\n
\n

To add the mega content, press the “Settings<\/strong>” button, which appears next to the menu item when hovered over.<\/p>\n\n\n\n

\"menu<\/a><\/div>\n\n\n\n

The Settings<\/strong> pop-up contains the following tabs: Mega Content<\/strong>, Item Icon<\/strong>, Item Badge<\/strong>, and Advanced<\/strong>.<\/p>\n\n\n\n

The Mega Content<\/strong> tab allows creating and editing the mega content.To create the mega content, activate the Use Mega content <\/strong>toggle. Then, select the editor from the Mega content type<\/strong> drop-down menu and press the “Edit Mega content<\/strong>” button.<\/p>\n\n\n\n

\"mega<\/a><\/div>\n\n\n\n

Add the necessary content to display it in the mega menu.<\/p>\n\n\n\n

\"mega<\/a>
Image Source: <\/em>A Gateway to Countries and Nations of the World<\/a><\/figcaption><\/div>\n\n\n\n

Once ready, press the “Update<\/strong>” button. <\/p>\n\n\n\n

Close the “Edit Mega content<\/strong>” window to return to the previous pop-up window.<\/p>\n\n\n\n

Adjust settings in other tabs if needed. These tabs allow assigning icons and badges to menu items and managing their style options (i.e., icons, colors, sizes).<\/p>\n\n\n\n

\"item<\/a><\/div>\n\n\n\n

Press the “Save<\/strong>” button to save the settings. Once done, push the “Save menu<\/strong>” button to apply changes.<\/p>\n<\/div><\/div>\n\n\n\n

Adjust the JetMenu Plugin Settings<\/strong><\/h2>\n\n\n\n
\n

Navigate to WordPress Dashboard > Crocoblock > JetPlugins Settings <\/em><\/strong>and open the <\/em>JetMenu<\/strong> tab.\u00a0Unroll the Main Menu<\/strong> tab and select the “Dropdown” option from the Layout<\/strong> list. If set, this option activates other settings related to the drop-down menu, such as the Dropdown Layout, Dropdown Position, Dropdown Icon<\/strong>, etc.<\/p>\n\n\n\n

\"main<\/a><\/div>\n\n\n\n

In the Layout <\/strong>section, you can also set the Sub Animation<\/strong>, Sub Trigger<\/strong>, and Sub Target<\/strong> options and upload or select a Toggle Icon<\/strong> and Toggle Opened Icon<\/strong>.In the Main Menu <\/strong>section, specify the Container Width<\/strong>, alter typography, colors, paddings, borders, distances, badge settings, and more.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Drop-Down Menu with the Mega Menu Widget<\/h2>\n\n\n\n
\n

You can build the drop-down menus using the Mega Menu<\/strong> widget to display them further on the front end.<\/p>\n\n\n\n

Navigate to the WordPress Dashboard ><\/em><\/strong> Crocoblock > Theme Templates<\/em><\/strong> tab.<\/p>\n\n\n\n

Press the “Add New<\/strong>” button and fill in the pop-up fields: select the “Header” option from the Template Type<\/strong> drop-down list, then select the editor from the Template Content Type<\/strong> drop-down list, and finally type the header\u2019s name in the Template Name<\/strong> field.Press the “Create Template<\/strong>” button.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

Additionally, read the tutorial How to Create a Custom WordPress Header with JetThemeCore<\/a> for instructions.<\/p>\n\n\n\n

Find the Mega Menu<\/strong><\/a> widget and drag and drop it to the page.\u00a0Select the created menu from the Menu<\/strong> drop-down menu and pick the “Dropdown” option from the Layout<\/strong> list.<\/p>\n\n\n\n

\"mega<\/a><\/div>\n\n\n\n

Read How to Create a Revamp Mega Menu in Elementor<\/a> to learn how to build mega menus.<\/p>\n\n\n\n

Style the menu as needed and press the “Update<\/strong>” button to save changes. <\/p>\n\n\n\n

Specify the visibility conditions of the header. Also, if required to apply visibility conditions to the header, read How to Set Header Conditions in WordPress<\/a> in the tutorial.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/strong><\/h2>\n\n\n\n

Now, navigate to the front end to check the menu.<\/p>\n\n\n\n

\"front<\/a>
Image Source: <\/em>A Gateway to Countries and Nations of the World<\/a><\/figcaption><\/div>\n\n\n\n

That’s it. Now, you know how to create stylish drop-down menus and manage their settings and appearance using the JetMenu<\/em> plugin for WordPress websites.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will learn how to create and customize a stylish drop-down menu with the JetMenu plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[256],"yoast_head":"\nHow to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T19:49:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/04\/create-a-new-menu-link-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/\",\"name\":\"How to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T10:00:48+00:00\",\"dateModified\":\"2024-04-15T19:49:39+00:00\",\"description\":\"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Drop-Down Menu with Mega Menu Widget in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock","description":"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.","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:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock","og_description":"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/","og_site_name":"Help Center","article_modified_time":"2024-04-15T19:49:39+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/04\/create-a-new-menu-link-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/","name":"How to Create Stylish Drop-down Menu \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T10:00:48+00:00","dateModified":"2024-04-15T19:49:39+00:00","description":"Learn how to create a drop-down menu (including a sub-menu) and add it to specific posts\/pages\/categories with the JetMenu plugin. Manage menu settings and appearance, add it to theme templates, and style.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-a-stylish-drop-down-menu-with-jetmenu-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Drop-Down Menu with Mega Menu Widget in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/4380"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=4380"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=4380"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=4380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}