If you're looking for a complete guide showing you how to implement different Divi menu customizations then you're definitely in the right place.
When it comes to changing the whole look and feel of your website or store. customizing the menu and make it match your design is crucial taking into consideration that it's the first thing that users notice when landing on your website.
Divi theme customizer actually contains some basic menu settings you can change such as fonts, link colors but if you want to go further than that and implement some animation effects and other cool custom stuff then you'll need some custom CSS code.
So, Grab a seat and let's see what we can do (:
Before You Start
Before we go straight to the customizations list I would like to state some points here:
In order to avoid any issues like your custom customizations being lost after updating to a new version of the Divi theme I highly recommend that you set up a child theme.
I will be explaining the customizations one by one but you can actually make a combination between them to achieve the exact look you're looking for.
To add custom CSS, JavaScript, or PHP code snippets properly, you can refer to our previous guide where we talked about adding custom code to the Divi theme.
Divi Menu Customizations Guide
Here we are in the actionable part of this article where we'll be learning to implement some cool Divi menu customizations on our website.
1 – Divi Menu Customizations using Theme Customizer settings
To control the basic settings of the Divi primary menu, we'll be using the theme customizer that you can access by logging in to your WordPress dashboard then from the left-hand side menu go to Divi > Theme customizer. Alternatively, you can go to Appearance > Customize.
Control the default fonts and link colors
From the list of settings provided navigate to Header & Navigation> Primary Menu Bar as shown below.
Now you're able to control a variety of default settings such as:
- The Menu Font colors
- The Menu text size
- The letter spacing
If you scroll down a little bit you'll see some other options related to customizing the links text and active colors as well as the background colors of the drop-down menus which we're going to show you how to style them using CSS later on in this article.
That's pretty much it for the theme customizer settings. You clearly notice that those settings only offer a very limited number of things to do when it comes to Divi menu customizations. But don't worry! we'll get it more fancy using CSS.
Let's move on …
2 – Divi Menu Customizations using CSS
The best way to be able to customize and style each and every element on your website and make it appear very unique is by adding some custom CSS. in the next few, headlines we're going to see some examples of what you can achieve. sounds interesting?
Let's Go!
Change the Divi Menu hover colors
One of many options that give a beautiful look and feel for your menus is adding some effects when users hover the mouse on the menu items. That's what we did exactly using the following CSS code snippet.
#top-menu
{
padding-bottom: 33px;
}
#top-menu > li > a
{
padding: 8px 15px;
padding-bottom: 8px!important;
}
#top-menu > li > a:hover
{
background-color: #ff0055;
color: #fff;
}After adding the code snippet inside the style.css file of your child theme you'll get a cool hover effect exactly like the one shown below. Of course, you can change the text color and background if you want.
Customize Divi Hamburger Menu
Now, if you might be wondering if we can style the small bars icon that shows on mobile devices. and the short answer is a big YES.
Use the following CSS code snippet to make it look clear to your users.
.mobile_menu_bar:before
{
background-color: #2ea3f2;
color: #fff;
padding: 3px;
}In the code above we have added a blue background color and also changed the color of the bars to white to make it more visible. the final result is shown below.
Another thing we can do is to customize the default drop-down menus that come once we install Divi on our sites.
So, to Change Dropdowns background color you can copy and paste the following CSS code snippet into your custom CSS file.
.nav li ul {
color: #fff;
background: #ebf2f7;
}The background color of the submenu is not changed to a light blue color (the result show below)
Staying in the Divi menu customizations the next thing a lot of people want to have control over is the background color of the items on hover. You can use the following CSS code for that purpose.
.nav ul li a:hover, .et_mobile_menu li a:hover {
background-color: #ff0055;
opacity: 0.7;
color: #fff!important;
}By adding the above CSS code to your website you'll get a hover effect for your drop-down menus which look like the following. Again, you can change the background to whatever you like.
The last but not least, if you are running a consultancy website or a store you might want the famous style of adding a call to action button next to the menu which entices people to take action. That's what I have done in the following CSS snippet.
#top-menu
{
padding-bottom: 33px;
}
#top-menu > li > a
{
padding: 8px 15px;
padding-bottom: 8px!important;
}
#top-menu > li.Custom_CTA a
{
background-color: #f2522e;
color: #fff;
border-radius: 15px;
}Before you go ahead and add the custom CSS we'll need to do another step which is to add a class to our menu item. so Log in to your WordPress admin dashboard then navigate to Appearance > Menus.
add the “Custom CTA” class to the menu item you want to turn into a call to action button. In my case, I have added it to the “Contact us” item which is the last menu item.
Now, click the “Save Menu” button in the right bottom corner and Booom! refresh the page and see the magic happens.
Congratulations for implementing the Divi menu customizations.
Further Reading:
- How to Customize Divi Read More Button
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Custom Footer Guide On WordPress
Roundup
In the end, every WordPress theme comes with default settings you can stick with, in case you just want something simple and don't want to deal with any custom coding but if you're building websites for clients and you're looking for more creativity then adding some custom styles to the menu will level up your skills.
Don't forget to match the custom colors, fonts, and backgrounds you have added with your website scheme to keep it as consistent as possible.
I hope you found this article useful, if you have any questions regarding the Divi menu customizations or want o share your experience with us then feel free to drop everything in a comment below. Otherwise, I would appreciate it if you can share this on social media.
Have a great day (:
Cheers!
