Skip to main content

Divi Mega Menu: Underlining the Active Menu Item

Enhancing the visual cue for active menu items can significantly improve the navigation experience on your website. By underlining the active menu item in Divi Mega Menu, users can easily identify their current location within your site's structure. Follow these steps to enable and customize the underline effect for active menu items.

Step 1: Access Mega Menu Settings​

Navigate to Mega Menu: Log into your WordPress dashboard and open the Mega Menu settings by clicking on the Mega Menu option.

Step 2: Configure Triangle Style​

Mega Menu Triangle Style: Scroll down to the section labeled "Mega Menu Triangle Style." Here, you will find various styling options for your menu.

  1. Tick the Checkbox: Look for the "Triangle Above Menu" option and check this box. This action enables the styling feature that allows for additional visual cues like underlining.

Triangle Above Menu

Step 3: Underline Settings​

Underline Active Menu Item:

  1. Select On Menu Link: Choose the "On Menu Link" option to apply the underline effect directly to the menu links.
  2. Enable Underline: Find the "Underline" button and toggle it to YES, enabling the underline effect for active menu items.

Underline

Step 4: Customize Underline Appearance​

Styling the Underline:

  1. Color: Select a color for the underline. This should ideally contrast with your menu's background for clear visibility.
  2. Height: Adjust the height of the underline to suit your design preferences. A thicker line can be more noticeable, enhancing visibility.
  3. Position: Set the position of the underline. Depending on your menu's design, you may want the line to appear close to the text for immediate association or slightly lower for a subtler effect.

Additional Information​

  1. Consistency: Ensure the underline color and style are consistent with your site's design language for a cohesive look.
  2. Testing: After applying these settings, preview your website on different devices to ensure the underline effect works seamlessly across desktop and mobile views.
  3. User Experience: While styling, consider the overall user experience. The goal is to make navigation intuitive without overwhelming users with excessive design elements.
Last updated on