Back to contents

How to create a stylish drop-down menu with JetMenu widget

From this tutorial you will learn how to create and customize a stylish drop-down menu with JetMenu plugin.

JetMenu plugin allows changing the menu’s appearance and creating a stylish drop-down menu as well as powerful horizontal and vertical mega menus. Follow the steps described below in order to find out more about the drop-down menu and the way to build it.

Creating and styling up a drop-down menu

Step 1 – The first step is to install and activate JetMenu plugin.

Step 2 – After that, go to Appearance > Menus section in WordPress Dashboard and create a new menu by clicking Create Menu option.

Menus block

Step 3 – Provide a name for the new menu and choose the menu’s location on the page from the list. Then, click Save Menu.

Menus block

Step 4 – Your new menu can be shown anywhere on the page, the menu locations list totally depends on the theme active on your site. Make sure to enable JetMenu for the current location in JetMenu Settings panel and click the Save Menu option.

Customize the menu’s items

Step 1 – Now fill up your menu with the pages, posts or custom links, that you want to be displayed in the menu.

Step 2 – Then, proceed to build the structure of the menu. Also, you can arrange the menu blocks in the order you prefer.

Let’s imagine you want the certain items to become the children of any other item. All you need to do is to grab and drag the items a bit to the right under the certain main item where you want to add sub-items.

Menu Structure

It is also possible to add several levels of sub items using preferable hierarchy in order to expand the menu. When the structure is created click Save Menu.

Step 3 – With the help of JetMenu plugin, you can assign icons and badges to your menu items. When you hover over the item you are going to see JetMenu button on the left of the title. Click it.

Step 4 – As a result, a new window will appear, where you have got several tabs. In the Icon section, you can select one of the icons from the icons library to use for the menu item.

Icon settings

Step 5 – Then, go to Badges tab, type in the text, which should be displayed as the badge and choose the color for the text and the badge itself using the color picker tool. Close the window and repeat the process for all items, to which you want to add an icon and a badge.

Style Settings in JetMenu for Submenu Items

You can access lots of stylization options if you go to JetMenu Settings block in WordPress Dashboard. Here you are going to find the whole bundle of stylization settings, which let you decorate and customize your menu the way you like.

Step 1 – Proceed to Sub Menu Styles and make sure you’re on the Simple Submenu Panel tab now.

Submenu Items
This block allows managing the following stylization settings:
  • Panel width – the general width of the submenu panel, set in px;
  • Panel background – turn this option on to access the panel background color option. If you want to use the gradient background, turn this option on as well and pick the second background color to apply for the panel;
  • Panel background gradient direction – here you can choose the direction of the gradient in order to define how the two colors should blend (from left to right, from top to bottom, etc.);
  • Panel background image – here you should pick an image to use for the submenu panel as a background. After you’ve set an image, feel free to set its attachment, position, repeat, and size;
  • Panel border – enable this option to view the settings available for the border. In case you’ve decided to use the border for the submenu panel, here you’ll be able to set the border style (solid, dotted, dashed, etc.), its width and color settings.
  • Panel box shadow – enable this option to access the shadow settings and apply the shadow around the submenu panel.

In this block, you can as well access the panel padding, border radius, and margin values to customize the submenu panel’s appearance according to your needs.

Step 2 – Enable Submenu Item Description and customize its typography.

Submenu Item Description

Step 3 – Choose the colors of items, text, background etc. You can set colors in 3 modes: Default, Hover, and Active.

JetMenu submenu styles customization within Elementor page builder

If you are using Elementor Pro or JetThemeCore plugin you are able to add the newly created menu to the heading template with help of JetThemeCore or Elementor Pro library.

Step 1 – Open the template for editing and find Mega Menu widget among the elements on the left panel.

Mega Menu widget

Drag it to a new section and then select the menu that you want to be displayed.

Menu settings in Mega Menu widget

Step 2 – You can manage the widget’s style settings from the Style block available for the JetMenu widget. These would be the same stylization settings as were available in Sub Menu styles from the JetMenu block in WordPress Dashboard.

Style settings in Mega Menu widget

Step 3 – So, here we go! Your drop-down menu is eventually ready! Save all the changes and go to the page to have a look at the new menu.

Mega menu widget

Great job! Now you know how to create a stylish drop-down menu easily.