How To Use & Customize Nav Menu Widget

A Navigation Menu is among the most important components when creating a website. It helps visitors to navigate to different pages or content easily.

Follow the step-by-step instructions:

1. Go to Menu Rometheme Header & Footer.

2. And you will be able to see the Nav Menu Widget.

3. Click Add New Container.

4. Select your layout : Flexbox or Grid.

5. On the canvas select your structure.

6. Drag the widget from the Elementor.

7. Drop it on the selected area.

8. Setting Menu :

• Click Content → Menu Setting.
• Click Menu Select → select Header.
• Showing Nav Menu by default like the picture below.

9. If your menu doesn’t appear, click Menu Screen to add or manage your menus.

10. Setting Menu :

• Click menu Custom Links
• Add URL and Text → click Add to Menu.
• Click remove to delete the menu.
• You can move your menu : up one, down one, under, or to the top.

11. Don’t forget to click Save Menu to save your chages.

12. Setting Submenu Content :

• Go back to elementor page.
• Click Content → Submenu Content.
• Setting sub menu icon spacing.
• Click Icon Library → Choose Icon → Click Insert.

13. Setting Hamburger :

• Click Content → Hamburger Setting.
• Add Hamburger Icon Open and Close : click Icon Library → Choose Icon → Click Insert.
• Hamburger setting will show in the responsive mobile like picture below.

14. Menu Wrapper Style (used to customize the menu wrapper style) :

• Click Style → Menu Wrapper.
• Customize the wrapper background color.

15. Menu Style (used to customize the menu style) :

• Click Style → Menu Style.
• Customize the typography, position, horizontal and vertical padding, space between, radius, text and background color.

16. Submenu Style (used to customize the submenu style) :

• Click Style → Submenu Style.
• Customize the typography, border, horizontal and vertical padding, space between, submenu icon color and size, alignment, radius, text and background color.

17. Hamburger Style (used to customize the hamburger style) :

• Click Style → Hamburger Style.
• Customize the icon alignment, padding, radius, icon size, background, icon and border color.

18. Don’t forget to click Publish to save the changes.