REA Nav Menu

The REA Nav Menu Widget allows you to customize the look and feel of the menus you have created in the WordPress.

To know how to create menus in WordPress, please click here.

Content

Layout

1. Menu: Select a menu from the dropdown from the Wordpress menus you’ve previously set up via Appearance > Menus.

2. Layout: Choose a Horizontal, Vertical, or Dropdown layout to show your navigation menu on the website.

3. Align: You can set the navigation menu item alignment, either Left, Center, Right, or Justified.

4. Pointer: You can select a pointer - None, Underline, Double Line, Framed, Background, or Text to showcase the current hovered menu.

5. Animation: You can choose the pointer animation - Fade, Slide, Grow, Drop In, Drop Out, or None to showcase the current hovered menu.

6. Submenu Indicator: Choose the dropdown icon to showcase the menus with submenu - None, Classic, Chevron, Angle, or Plus.

7. Animation: Change the animation, from the various options, to be played.

Mobile Dropdown

1. Breakpoint - Select the pixels at which the menu toggle should break in to show the navigation menu - Mobile (<768px), Tablet (<1025px) or None.

2. Full Width - Select the full width option to show the menus in full width of the device.

3. Align - You can align the mobile menu to aside or to the center.

4. Toggle Button - You can show hamburger icon or None to show the menu toggle button.

5. Toggle Align - You can align the toggle button to left, center or right.

Style

Main Menu

1. Typography: You can set the typography options for the menu item text such as font size, font family, font-weight etc.

2. The following options can be set differently for all three states: Normal, Hover, and Active.

   Note - that if a Hover color is set but no Active color is set, the Active color will use the Hover color by default.

   1. Text Color: You can set the text color to the navigation menu text.

   2. Pointer Color: You can choose the color of the pointer’s hover or active states. The normal state uses the color set as the Accent Color in the Global Colors settings.

3. Pointer Width: You can set the width of the pointer.

4. Horizontal Padding: You can set the horizontal padding around the text of the nav menu items.

5. Vertical Padding: You can set the vertical padding around the text of the nav menu items.

6. Space Between: You can set the spacing between the nav menu items.

Dropdown

On desktop, this will affect the submenu. On mobile this will affect the entire menu.

1. The following options can be set differently for all three states: Normal, Hover, and Active.

   1. Text Color: You can set the text color to the navigation sub menu text.

   2. Background Color: You can choose the background color of the dropdown menu items.

2. Typography: You can set the typography options for the menu item text such as font size, font family, font-weight, etc.

3. Border Type: You can select a border type around the dropdown menu - None, Solid, Double, Dotted, Dashed, or Groove

   1. Border Width: You can set the width of the border for the dropdown menu.

   2. Border Color: You can set the color of the border for the dropdown menu.

4. Border Radius: You can set the border radius to control corner roundness for the dropdown menu.

5. Box Shadow: You can create a box shadow around the dropdown menu.

6. Horizontal Padding: You can set the horizontal padding around the text of the menu items

7. Vertical Padding: You can set the vertical padding around the text of the menu items

8. Divider

   1. Border Type: You can select a border type for the divider - None, Solid, Double, Dotted, Dashed, or Groove

   2. Color: If divider border is chosen, you can choose the color of the divider border

   3. Border Width: If divider border is chosen, you can set the width of the divider border

9. Distance: You can set the amount of space between the toggle and the dropdown menu.

Note- Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your submenu indicators will display properly.

Toggle Button

1. The following items can be set differently for both the normal and hover states.

   1. Color: You can choose the color of the toggle button icon.

   2. Background Color: You can choose the background color of the toggle button.

2. Size: You can set the size of the toggle button.

3. Border Width: You can set the border width around the toggle button.

4. Border Radius: You can set the border radius of the toggle button.