Divi Menu Customization

by | Aug 22, 2019 | Divi tutorials | 0 comments

Divi Menu Customization

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 so it fits better by 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

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

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.

0 Comments

Submit a Comment

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

1 Shares
Share1
Tweet
Pin
Buffer