Now that you have installed Divi by Elegant Themes and little by little you have been personalizing the web according to your goals, it is time to add those little details that make the difference when the user accesses it.

The first step to should be focused on the header and menu section. As the first section of a website, this will be one of the most important things you should pay attention to.

And if you want to have a good impact on your users and stand out over the competitors, you should make the maximum effort to personalize this area.

Unfortunately, you can quickly realize that the Divi mega menu feature is a bit lazy and doesn’t provide the necessary features to fit the actual standards.

That’s why we strongly recommend you to install our Divi Mega Menu plugin that will help you to save a lot of time than configuring your own mega menu functionality.

As you can see in our demo, this mega menu for Divi has a simple and intuitive interface, integrated into the Divi customizer dashboard, allowing you to create and customize an unlimited amount of mega menus and tabs menus without any programming skills.

However, if you want to go through the hard work,  here we will show you some CSS codes to personalize the menu with Divi.

First of all, you must copy this code in a notebook so that you have it at hand:

.et_header_style_left #et-top-navigation nav > ul> li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#top-menu li {
padding-right: 5px;
}
#et-top-navigation {
padding: 20px 0 !important;
}
#top-menu li a {
background: #C1B2AB;
padding: 15px 20px;
border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}
#top-menu li a:hover {
background: #559CAD !important;
}
#top-menu li.current-menu-item > a {
background: #edc77b;
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
}

Where will we work?

The route where you will paste each code is the following:

1. WordPress
2. Divi
3. Theme options
4. General
5. Customized CSS

We never get bored of saying this: Always, always, ALWAYS! Save the changes when finished.

Code to change the background color of the menu

To change the background color of the menu, enter “Custom CSS” as indicated above. Then, we change the color code (highlighted in yellow).

#top-menu li a {
background: #C1B2AB;
padding: 15px 20px;
border-radius: 3px;
}

Of course, paste and save the changes.

BONUS: If you don’t have the code at hand you can download the “Color Pick Eyedropper” extension in Chrome. It will allow you to select the color you want and copy the code immediately.

Code to change the background color of the hover

The hover is the effect that happens when we position the cursor on an element of the menu. In this case, we can modify the color that the button will have when the user places the cursor on it.

To change the background color of the hover, we return to “Custom CSS” as indicated above. Then, as in the previous step, we changed the color code (highlighted in yellow).

#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}

Save the changes!

Code to change the background color of the active menu

The active menu is the page on which we are. To change the background color of the active menu, enter “Custom Ccs” as indicated in the previous two steps. In the section highlighted in yellow, write the code of the color you want.

#top-menu li.current-menu-item > a {
background: #edc77b;
}

Remember to save the changes.

Code to add a moving line under the title

This style is minimalist and elegant, is a line that appears hover under each menu title when we put the cursor, and this line will be maintained when we click.

The CSS code for this effect is:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86;
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

In the highlighted items you can place the color of the line and then the height.

Save the changes!

Code to add a border to the titles

This effect generates a box around the menu title in the active link. If you keep the previous effect active, you can show the title in a box and at the same time the line under the title where you place the cursor (hover).

By default, the lines are thick, but you can modify this detail as you wish.

The CSS code is:

#top-menu li > a:hover {
box-shadow: 0 10px 0 0 #F15A29!important; 
padding-bottom: 34px;
opacity: 1 !important;
}
#top-menu li li a {
padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
border: 10px solid #F15A29; 
padding: 10px;
margin-bottom: -10px;
}

In the first highlighted items you can modify the color and height of the hover line, in the second highlighted you can modify the color and height of the box.

Code to add buttons to titles

This code to customize the Divi Menu adds a button effect to the titles of the main menu. This code will allow you to modify the static menu, the asset and the link in hover. It also allows you to customize the appearance of the buttons, if you want them to be completely square or with rounded corners.

The CSS code is:

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#top-menu li {
padding-right: 5px;
}
#et-top-navigation {
padding: 20px 0 !important;
}
#top-menu li a {
background: #C1B2AB;
padding: 15px 20px;
border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}
#top-menu li a:hover {
background: #559CAD !important;
}
#top-menu li.current-menu-item > a {
background: #edc77b;
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
}

The first highlight will allow you to change the background color of the button. In the second item, you can modify the rounded effect of the button (as it is in the example, they are square buttons with a very light rounded corner). In the third highlighted item you can add the background color in hover. In the fourth, the color of the active menu button.

Divi by Elegant Themes is a marvel thanks to the high level of personalization in many details. However, we love creative projects and we all want our websites to make a difference, coding can be your best friend.

See you in the next post!