Select Page

Divi Menu Customizations On WordPress (Explained)

  1. Home
  2. »
  3. Divi
  4. »
  5. Divi Menu Customizations On WordPress (Explained)

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

divi menu customizations guide
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

Divi Menu customizer settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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
Divi Menu customizer settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

Divi Menu customizer settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

divi menu change hover colors
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

divi change the hamburger menu color
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Customize Divi Drop down menus

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)

change divi dropdown menu color
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

divi dropdown menu hover color
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Add a call to action button to Divi Primary Menu

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.

Add call to action button to Divi menu
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now, click the “Save Menu” button in the right bottom corner and Booom! refresh the page and see the magic happens.

Add call to action button to Divi menu
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Congratulations for implementing the Divi menu customizations.

Further Reading:

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!

0 Comments
Submit a Comment

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

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This