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.
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
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.
Explaining the CSS code
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.
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.