Midsummer Sale
25% FF
any theme or service
midsummer25
25% FF
any theme
or service
midsummer25
25% FF any theme or service
midsummer25
Close
Midsummer Sale
25% FF
any theme or service
Promocode:
midsummer25

How to Edit Menu in Elementor in 10 Steps (with JetMenu)

Custom menus are must-have for any type of website. They simplify the navigation process and allow users to find the necessary page in a few clicks. A lot of site owners put menus on the page header to be shown on every page of your website. Add menu in Elementor is a simple process. Especially if you use our tips.

From this tutorial, you’ll learn how to how to edit menu in Elementor with JetMenu. There are only 10 easy steps to a unique menu!

Step #1: Add New Menu in Elementor

  1. First, you need to open the page for editing with Elementor.  Navigate to Pages > Add New tab on the left of the Dashboard. edit menu with elementor
  2. Click Edit with Elementor button.  Custom Menu Module for Elementor
  3. Click Add new section and define its structure in order to place a menu there.  Custom Menu Module for Elementor
  4. Select the necessary section structure.  edit menu with elementor
  5. Locate Custom Menu content module. edit menu with elementor
  6. Drag and drop it to the area where you want to add it. You’ll see the Edit Custom Menu block on the left. edit menu with elementor
  7. In the Content block you need to specify the menu you want to display with Custom Menu module. Select the menu you want to add from the drop-down list of your existing menus.
  8. Switch to Style tab to change the module style. You can see the detalied description of the Custom Menu module style settings in the JetMenu Custom menu Module documentation block.
    Keep reading this tutorial if you want to learn how to create a menu similar to the one shown below.
    edit menu with elementor

Step #2: Customize Menu in Elementor

  1. Add a new section where you want to place a menu. Select the section structure (in our case, there will be 4 columns). edit menu with elementor
  2. Locate Custom Menu module and drop it to the column where you want to place it. edit menu with elementor
  3. In the Content block select the menu you want to use for this column.
  4. Let’s style this menu up! Switch to Style block to view all the available style settings. You can find the example of styling up a menu in the block below.
  5. Input the preferable main menu width in the Main Menu Width block (in px). We’ve set 300 px.  edit menu with elementor
  6. Select Classic background type.
  7. Set the background color using Color picker tool (we’ve set #221872 HEX value). edit menu with elementor
  8. Input the border radius value in the Border Radius block to make the menu angles more rounded (in our example it is 6 px). edit menu with elementor
  9. Select Solid in the Border Type (you can select any other border if you think it more suitable).  edit menu with elementor
  10. Input the border width value in the Width field (we set 1 px border width).
  11. Set the preferable border color (we use #221872 HEX color).
  12. Enable Box Shadow option.  edit menu with elementor
  13. Specify the shadow color (we used rgba(0,0,0,0.3) color and transparency settings).
  14. Set 10 blur value using the corresponding controls for the shadow options.

Step #3: Discover More Submenu Style Settings

  1. Open Sub Menu settings. Here you can manage the submenu background, width, etc. edit menu with elementor
  2. Specify the submenu width in the corresponding field (in our case, it is 250 px).
  3. Select Classic background type and set the necessary background color (e.g., #221872 HEX value).  edit menu with elementor
  4. Define the preferable border radius (we used 6 px). edit menu with elementor
  5. Set the needed border type (we used Solid border type). edit menu with elementor
  6. In the Width field you need to input the border width value (in our case, it is 1 px).
  7. Specify the border color (we used #221872 HEX color value).
  8. Enable Box Shadow option to apply the shadow to the submenu blocks. edit menu with elementor
  9. In the Color block specify the shadow color and opacity (we used rgba(0,0,0,0.5)).
  10. Set Blur to 10.

Step #4: Set Main Menu Items Style

  1. Let’s proceed to Main Menu Items style settings. First, we need to customize them in the normal mode. edit menu with elementor
  2. Specify the necessary background color (in our case it is rgba(60,137,178,0.29)). edit menu with elementor
  3. Use the needed text color (in our example it is #89c8ff).
  4. Enable Typography settings to apply the font settings for the menu items.  edit menu with elementor
  5. We used Playfair Display font family.
  6. Specify the border radius value in the Border radius block (we used 6 px). edit menu with elementor
  7. Enable Box Shadow option. Set the shadow color (we used rgba(0,0,0,0.5)). edit menu with elementor
  8. Reduce the Blur value to 3.
  9. Now let’s switch to Hover mode.  edit menu with elementor
  10. Here let’s specify the Text Color value (we used #4cff64). All the other options will remain the same.

Step #5: Adjust Submenu Items Style

  1. Open Submenu Items style settings (scroll down to access them). First, we’ll customize the Normal mode. edit menu with elementor
  2. Select the background color to use it as a submenu item background (we selected rgba(18,43,104,0.98) color value). edit menu with elementor
  3. Specify the Text Color (in our case, it is #89c8ff).
  4. Let’s apply the border to the submenu items. We used Solid border type, 1 px width value. edit menu with elementor
  5. Select the border color (in our case, it is #221872).
  6. Enable Box Shadow option.  edit menu with elementor
  7. We’ve selected rgba(0,0,0,0.5) shadow color and opacity, but you can use the one that suits your website appearance the most.
  8. Reduce the Blur value to 3.
  9. Enable First item custom styles option and specify the Border Radius value (in our example it is 6 px). Apply the same settings to the Last item custom styles.edit menu with elementor
  10. Now let’s switch to Hover mode and set the Text Color to be shown on hover (e. g., #77ff89). edit menu with elementor
    We haven’t used badges and icons for the menu items, but you can set and customize them using the same colors to create your unique menu style.

Step #6: Edit Drop-Down Icons

  1. Let’s navigate to Drop-down icon style settings, which is located at the bottom of Edit Custom Menu Style block.  edit menu with elementor
  2. Specify the size of the icon position in the Offset block (we used 15 px).
  3. Set the necessary Icon Color (in our case, it is #221872). edit menu with elementor
  4. Set the needed Icon Background Color (we used #89c8ff). edit menu with elementor
  5. Our Icon Font Size is 11 px.
  6. The Icon Box Size is 18 px. But you can set the one that suits the most for your website.
  7. In the Border Type you need to select the type of the border to apply for the icon (we used Solid border type).  edit menu with elementor
  8. Input the border width value in the corresponding field (we applied 1 px).
  9. In the Color field you need to set the border color (in our example it is #221872).
  10. We also enabled Box Shadow option and applied rgba(0,0,0,0.5) shadow color in the Shadow Color block.  edit menu with elementor
  11. The shadow blur is 3, but you can apply the one that you find suitable for your menu style to match your website looks.
  12. Now that we’ve styled up one menu block, you can apply this style to any other menu you want to add to the section.

Step #7: Applying the Same Style to Several Menu Columns

  1. In our example, we decided to create the section, which consists of 4 columns, each containing the separate menu. So we hovered on the Edit Column icon (it is on the top left corner of the column) and clicked Duplicate Column option. We duplicated this menu 3 times, and now we’ve got 4 similar columnsedit menu with elementor
  2. Let’s specify the menus we need to show in each one of them. Put the mouse cursor to the top right corner of the column where you need to place another menu and click Edit icon. edit menu with elementor
  3. You’ll see Edit Custom Menu block. Here locate Content and in the Select Menu select the one that you need to add to the column. edit menu with elementor

Step #8: Styling Up the Section

  1. Now let’s edit the whole section to make our mega menu look more stylish. Hover on the Edit Section block and click Edit Section icon to navigate to Section Layout and Style settings.   edit menu with elementor
  2. In the Layout block disable Stretch Section option.  edit menu with elementor
  3. In the Content Width select Boxed type.
  4. Apply No Gap in the Columns Gap block.
  5. Select Middle Content Position.
  6. Now navigate to Style settings and select Classic background type. Here you need to specify the needed section background color (we used #000044). edit menu with elementor

Step #9: Saving Section as Template

  1. Click on Templates icon and then navigate to Save Template option. edit menu with elementor
  2. Type in the template title and click Save to save it.  edit menu with elementor

Step #10: Adding Section to Main Menu Item

  1. Once the template is saved, you can add this menu section to one of the menu items (e.g., Main Menu item). To do it navigate to Appearance > Menus tab on the left of the Dashboard. edit menu with elementor
  2. Select Main menu for editing. Click Select button.  edit menu with elementor
  3. Hover on one of the Main menu items and click JetMenu option to edit the item with JetMenu. edit menu with elementor
  4. Enable Mega Submenu Enabled option and click Edit Mega Menu Item Content button. edit menu with elementor
  5. Here click Templates > Templates Library. edit menu with elementor
  6. Switch to My Templates block.  Select the previously saved template. It will appear on the page. edit menu with elementor
  7. Then click Save button and click Back to return to the Content block. edit menu with elementor
  8. Click Save button in order to save the changes. edit menu with elementor

At last, check your menu! Don’t forget to change the Main menu style to make it match your Custom Menu style! You can learn how to do it from How to Change JetMenu Style tutorial.