[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

Divi Menu Customization

Mark Hendriksen | August 22, 2019 | 2 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

For this tutorial, we are going to customize the Divi menu. I will be using the free layout pack Business Consultancy from the Elegant Themes library and then we will be customizing the menu in the Divi builder so it fits better with the styling. When you learn these skills, you can customize any Divi menu. I also recommend seeing my other tutorial about styling the Divi menu.

After finishing this tutorial this will be the end result:

Divi customizing the menu end result

For this tutorial, I started with installing the Business Consultancy layout on a fresh installation. In case you don’t know how to install a premade layout pack you can follow this tutorial.

Step 1: Customizer settings

After installing the layout pack the menu looks like this:

Default Divi menu

This is just the default Divi menu and it is not very exiting so let’s give it some styles.

The first thing I did is uploading a logo in Divi > Theme Options > Logo

Then go to:
Divi > Theme Customizer > Header & Navigation > Primary Menu Bar

And use the following settings:

Make full width: check
Logo max height: 80
Text size: 16
Font: Oswald
Font style: Uppercase
Text color: #000000
Active link color: #af8035

Primary Divi menu settings

I never like that the menu shrinks on scroll, so I will make the fixed menu height the same.

Go to Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings

And fill in the field fixed menu height 66.

I also change the active primary menu link color to #af8035

I removed the search icon from the menu.
Go to Divi > Theme Customizer > Header & Navigation > Header Elements

And uncheck show search icon.

Step 2: Customizing the Divi menu with CSS

Our menu all ready looks a lot better but we are going to customize a bit further with some CSS.
The menu items are close together so let’s give them a bit more space.

Place the following snippet in Divi > Theme Options > CSS

@media (min-width: 1200px) {
#top-menu li {
    padding-right: 65px;
}}

For this snippet I use a media query, media queries let you target CSS for particular screen sizes. In my case screen sizes with a minimum width of 1200px. The reason I did this is that otherwise, my menu items will overlap the logo. Learn more about Divi breakpoints and media queries.

Menu button
To create the menu button you need first to apply a CSS class to the menu item that you want to make a button.

Go to Appearance > Menu

Go to the upper right corner and expand screen options, now check CSS classes.

Open the menu item that you want to make a button of and give it the class cta_menu

Add a CSS class for your menu button

Now add the following CSS snippet in Divi > Theme Options > CSS

/* ### MENU BUTTON ### */
li.cta_menu a {
	padding: 12px 15px !important;
    background-color: #af8035;
    color: #fff !important;
}

/* ### MENU BUTTON TEXT COLOR WHEN SCROLLED DOWN ### */
.et-fixed-header #top-menu li.cta_menu a {
	color: #fff !important;
}

In the first snippet, you can change the color code for the background and text color. The second snippet is for changing the text color when scrolling down.

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

2 thoughts on “Divi Menu Customization”

Leave a Comment

1 Shares
Share1
Pin
Tweet