Styling the Divi Menu

by | Jun 10, 2019 | Divi tutorials | 0 comments

Styling the Divi menu bar

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.

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.


Submit a Comment

Your email address will not be published. Required fields are marked *