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:

Step 1: Use Menu

• On the canvas select your structure.
• Go to Menu Rometheme Header & Footer, and you will be able to see the Nav Menu Widget.
• Drag the widget from the Elementor and drop it in the selected area.

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

• If your menu doesn’t appear.
• Click Menu Screen to add and manage your menus.

• Edit your menu in the menu structure.
• Click menu → you can edit navigation label.
• Click remove to delete the menu.
• You can move your menu : up one, down one, under, or to the top.
• Don’t forget to click Save Menu to save your changes.

• Click custom links → you can create a new menu in the link text column.
• Click Add to Menu.

• Select your menu position : left, center, right, justified.
• Select dropdown as open : hover or click.
• This setting for open the submenu in desktop and has no effect on the mobile view, If you choose “Click”, the menu will not link to the menu page.
• You can also select responsive breakpoint : tablet or mobile.
• Don’t forget to click Save Menu to save your changes.

Step 2: Customize Menu

• Go back to elementor page.
• Click Style → Menu Style.
• Customize your font in the typography column.
• Setting the horizontal and vertical padding as you need.
• Select your color in the text color column, click specific color to add another color.

Step 3: Customize Sub Menu

• Click Style → Submenu Style.
• Customize your font in the typography column.
• Setting the horizontal and vertical padding as you need.
• Select your color in the text color column, click specific color to add another color.
• You can also customize submenu icon.

• You can also customize the submenu icon.
• Click content → submenu content.
• Click Icon Library.

• Click Rometheme Icon Pack → Choose Icon → click Insert.
• To setting icon size, you can adjust in ‘sub menu icon spacing’