{"id":12104,"date":"2019-06-10T07:22:35","date_gmt":"2019-06-10T05:22:35","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12104"},"modified":"2025-04-24T06:39:55","modified_gmt":"2025-04-24T04:39:55","slug":"styling-the-divi-menu","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/styling-the-divi-menu\/","title":{"rendered":"Styling the Divi Menu"},"content":{"rendered":"\n

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

Here is a preview of the end result.<\/p>\n\n\n

\n\nView Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

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<\/a> to create the same top bar. If you don\u2019t need this bar then you can just follow this tutorial.<\/p>\n\n\n\n

Check also out my other tutorial about Divi menu customization<\/a>.<\/p>\n\n\n\n

Step 1<\/h2>\n\n\n\n

I first go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar<\/p>\n\n\n\n

And I use the following settings<\/p>\n\n\n\n

\"Styling<\/figure>\n\n\n\n

In Divi > Theme Customizer > Header & Navigation > Header Elements<\/p>\n\n\n\n

I unchecked show social icons and show search icon<\/p>\n\n\n\n

Step 2<\/h2>\n\n\n\n

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\u2019t have a child theme yet than you can follow is guide to create a child theme<\/a>.<\/p>\n\n\n\n

@media only screen and ( min-width: 981px ) {\n.et_header_style_left  #et-top-navigation {\n        padding-top: 0px !important;\n}\n\n.et_header_style_left #et-top-navigation nav>ul>li>a {\n        padding-top: 28px;\n\tpadding-bottom: 28px;\n\tpadding-left: 35px;\n\tpadding-right: 35px;\n}\n\n#top-menu li {\n        padding-right: 0px;\n\tmargin-left: -4px;\n}\n\n#top-menu li.current-menu-item {\n\tbackground-color: #f5f5f5;\n}\n\n#top-menu li a:hover {\n\tbackground-color: #f5f5f5;\n}}<\/code><\/pre>\n\n\n\n
Explaining the CSS code<\/h2>\n\n\n\n
.et_header_style_left #et-top-navigation nav>ul>li>a {\n\tpadding-top: 28px;\n\tpadding-bottom: 28px;\n\tpadding-left: 35px;\n\tpadding-right: 35px;\n}<\/code><\/pre>\n\n\n\n
For example if you want to give the menu more height then you can increase the top and bottom padding.<\/p>\n\n\n\n
These 2 snippets control the background color of the current active and hover state of the menu item.<\/p>\n\n\n\n
#top-menu li.current-menu-item {\n\tbackground-color: #f5f5f5;\n}\n\n#top-menu li a:hover {\n\tbackground-color: #f5f5f5;\n}<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
To style the dropdown menu you can follow this tutorial how to style the Divi dropdown menu<\/a><\/p>\n\n\n\n
If you have any questions just drop a comment below.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n