[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

Styling the Divi Menu

Mark Hendriksen | June 10, 2019 | 2 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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

Styling the Divi menu bar

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…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

2 thoughts on “Styling the Divi Menu”

    • Hi Devin,

      I don’t exactly understand what you mean. Do you want to have an ID of the menu and use that for your custom CSS?

      Reply

Leave a Comment

1 Shares
Share1
Pin
Tweet