How to Add the Stylish Underline and Overline Hover Effects in the Divi Menu

by Akbar Padma

Last updated on November 25, 2024

The Divi menu is a versatile and customizable navigation tool that is a core component of websites built with the Divi Theme Builder. Known for its flexibility, the Divi menu allows us to create visually stunning and highly functional navigation systems that align perfectly with your brand identity.

Adding stylish underline and overline hover effects is one way to elevate your website’s menu. These subtle yet visually appealing animations enhance user interaction and improve the overall browsing experience.

This tutorial will explore how to create these dynamic hover effects for your Divi menu using custom CSS and settings. This will help you achieve a polished and modern look for your website, whether you’re an experienced web designer or a Divi beginner. This tutorial is easy to follow and ensures a professional finish.

How to Add the Stylish Underline and Overline Hover Effects in the Divi Menu

Step 1: Create or Open a Header Template

On your WordPress dashboard, navigate to Divi -> Theme Builder. On the Theme Builder page, create a new header template or open an existing one by clicking the Add Global Header button or selecting the header’s template you want to add the stylish underline or overline hover effect.

If you’re creating the Header from scratch, once you enter the Header Template, you can start by designing it.

Add a new section and row, then choose a layout (e.g., one row, two columns). Afterward, use modules like the Menu module for navigation, the Search module if you want a search bar, and the Social Media Follow module for social icons. In this example, we only add the Menu module to our header.

Next, edit and style up your header as you prefer.

Step 2: Add the Custom CSS

Once you’ve added and styled your header, we will add the custom CSS to your header template.

Go to the Page Settings by clicking the gear button (⚙️) on your Header Template editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.

Here is an example of a CSS snippet that you can apply to add the stylish underline hover effect to your menu:

.et_pb_menu_0_tb_header ul li > a:before{
    content: '';
    width: 0;
    left: 50%;
    height: 4px;
    border-radius: 2px;
    background: rgb(145, 255, 2);
    position: absolute;
    z-index: -1;
    bottom: 14px;
    opacity: 0;
    transition: .4s cubic-bezier(.27,.03,.30,1.63);
}

.et_pb_menu_0_tb_header ul li > a:hover:before{
    width: 110%;
    left: -5%;
    opacity: 1;
}

.et-menu li li > a{
    width: 140px;
    padding: 15px;
}

Note: If you want to change the hover effect from underline to overline, you can replace the property and value of “bottom: 14px;” (e.g., top:15px;).

That’s it. After adding the custom CSS, click the Save Changes button on the Theme Builder page to apply the modifications.

To see the result, open any page on your site that includes the header template you’ve just customized.

What did the CSS code do?

Initial State

.et_pb_menu_0_tb_header ul li > a:before {
}

This CSS selector targets the pseudo-element :before of anchor (<a>) elements within list items (<li>) of an unordered list (<ul>) with the class.

.et_pb_menu_0_tb_header. It applies the following styles:

content: '': Creates an empty content for the pseudo-element.
width: 0: Sets the initial width to 0 pixels.
left: 50%: Positions the line element horizontally at the center.
height: 4px: Sets the height to 4 pixels.
border-radius: 2px: Rounds the corners.
background: rgb(145, 255, 2): Sets the background color to a specific RGB value.
position: absolute: Positions the line element within its parent container (menu items).
z-index: -1: Places the element behind other content.
bottom: 14px: Positions the line element 14 pixels from the bottom of the menu items.
opacity: 0: Makes the line element initially invisible.
transition: .4s cubic-bezier(.27,.03,.30,1.63): Adds a smooth transition effect when the element’s properties change.

Hover State

.et_pb_menu_0_tb_header ul li > a:hover:before {
}

This selector targets the same pseudo-element as before, but only when the anchor is hovered over. It modifies the following properties:

width: 110%: Expands the width to 110% of its menu item’s width.
left: -5%: It shifts the line element 5% to the left.
opacity: 1: It makes the line element visible.

Additional Styling

.et-menu li li > a {
    width: 140px;
    padding: 15px;
}

This CSS code applies styles to sub-menu items within the main menu items. Here’s a breakdown of each part:

width: 140px: Sets the width of the anchor to 140 pixels.
padding: 15px: Adds 15 pixels of padding around the content of the anchor.

The Bottom Line

Adding stylish underline and overline hover effects to your Divi menu can significantly enhance your website’s visual appeal and user experience. You can create a menu that stands out while aligning with your brand identity by utilizing custom CSS, thoughtful design adjustments, and Divi’s flexible theme builder.

In conclusion, these hover effects not only add a professional touch but also improve navigation by providing clear visual feedback. Feel free to experiment with the property values in the CSS snippet, such as colors, thickness, line position, and animation speed, to tailor the effects to your site’s unique style, ensuring a polished and engaging design.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.