Styling the Divi Menu

In this tutorial, I will show you how you can style the Divi menu bar differently than with the default styles in Divi. To accomplish this, we are going to use some custom CSS code.

Here is a preview of the end result.

In this demo you also see a bar above the Divi menu, you can follow the tutorial on how to create a custom Divi header to create the same top bar. If you don’t need this bar then you can just follow this tutorial.

Check also out my other tutorial about Divi menu customization.

Step 1

I first go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar

And I use the following settings

In Divi > Theme Customizer > Header & Navigation > Header Elements

I unchecked show social icons and show search icon

Step 2

Now we are going to place some CSS code. You can place this code in Divi > Theme Options > CSS or in your Divi child theme. If you don’t have a child theme yet than you can follow is guide to create a child theme.

@media only screen and ( min-width: 981px ) {
.et_header_style_left  #et-top-navigation {
        padding-top: 0px !important;
}

.et_header_style_left #et-top-navigation nav>ul>li>a {
        padding-top: 28px;
	padding-bottom: 28px;
	padding-left: 35px;
	padding-right: 35px;
}

#top-menu li {
        padding-right: 0px;
	margin-left: -4px;
}

#top-menu li.current-menu-item {
	background-color: #f5f5f5;
}

#top-menu li a:hover {
	background-color: #f5f5f5;
}}

Explaining the CSS code

.et_header_style_left #et-top-navigation nav>ul>li>a {
	padding-top: 28px;
	padding-bottom: 28px;
	padding-left: 35px;
	padding-right: 35px;
}

For example if you want to give the menu more height then you can increase the top and bottom padding.

These 2 snippets control the background color of the current active and hover state of the menu item.

#top-menu li.current-menu-item {
	background-color: #f5f5f5;
}

#top-menu li a:hover {
	background-color: #f5f5f5;
}

If you want a different background color on hover then the grey, I used than you can change the color code. Same goes for the current active menu item.

To style the dropdown menu you can follow this tutorial how to style the Divi dropdown menu

If you have any questions just drop a comment below.

You Might Also Like…

• Divi Menu Customization
• How to add icons in your Divi menu
• How to Style the Divi Mobile Menu
• How to style and adjust the width of the dropdown menu in Divi with CSS
• Divi Mobile Plugin From Divi Engine