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:
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:
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 style: Uppercase
Text color: #000000
Active link color: #af8035
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.
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
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.