{"id":13173,"date":"2019-08-22T06:13:17","date_gmt":"2019-08-22T04:13:17","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=13173"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"divi-menu-customization","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-menu-customization\/","title":{"rendered":"Divi Menu Customization"},"content":{"rendered":"\n

For this tutorial, we are going to customize the Divi menu<\/a>. 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<\/a> 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<\/a>.<\/p>\n\n\n\n

After finishing this tutorial this will be the end result:<\/p>\n\n\n\n

\"Divi<\/figure>\n\n\n\n

For this tutorial, I started with installing the Business Consultancy layout on a fresh installation. In case you don\u2019t know how to install a premade layout pack you can follow this tutorial<\/a>.<\/p>\n\n\n\n

Step 1: Customizer settings<\/h2>\n\n\n\n

After installing the layout pack the menu looks like this:<\/p>\n\n\n\n

\"Default<\/figure>\n\n\n\n

This is just the default Divi menu and it is not very exiting so let\u2019s give it some styles.<\/p>\n\n\n\n

The first thing I did is uploading a logo in Divi > Theme Options > Logo<\/p>\n\n\n\n

Then go to:
Divi > Theme Customizer > Header & Navigation > Primary Menu Bar<\/p>\n\n\n\n

And use the following settings:<\/p>\n\n\n\n

Make full width: check
Logo max height: 80
Text size: 16
Font: Oswald
Font style: Uppercase
Text color: #000000
Active link color: #af8035<\/p>\n\n\n\n

\"Primary<\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

I never like that the menu shrinks on scroll, so I will make the fixed menu height the same.<\/p>\n\n\n\n

Go to Divi > Theme Customizer > Header & Navigation > Fixed Navigation Settings<\/p>\n\n\n\n

And fill in the field fixed menu height 66.<\/p>\n\n\n\n

I also change the active primary menu link color to #af8035<\/p>\n\n\n\n

I removed the search icon from the menu.
Go to Divi > Theme Customizer > Header & Navigation > Header Elements<\/p>\n\n\n\n

And uncheck show search icon.<\/p>\n\n\n\n

Step 2: Customizing the Divi menu with CSS<\/h2>\n\n\n\n

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\u2019s give them a bit more space.<\/p>\n\n\n\n

Place the following snippet in Divi > Theme Options > CSS<\/p>\n\n\n\n

@media (min-width: 1200px) {\n#top-menu li {\n    padding-right: 65px;\n}}<\/code><\/pre>\n\n\n\n
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<\/a>.<\/p>\n\n\n\n
Menu button<\/strong>
To create the menu button you need first to apply a CSS class to the menu item that you want to make a button.<\/p>\n\n\n\n
Go to Appearance > Menu<\/p>\n\n\n\n
Go to the upper right corner and expand screen options, now check CSS classes.<\/p>\n\n\n\n
Open the menu item that you want to make a button of and give it the class cta_menu<\/strong><\/p>\n\n\n\n
\"Add<\/figure>\n\n\n\n
Now add the following CSS snippet in Divi > Theme Options > CSS<\/p>\n\n\n\n
\/* ### MENU BUTTON ### *\/\nli.cta_menu a {\n\tpadding: 12px 15px !important;\n    background-color: #af8035;\n    color: #fff !important;\n}\n\n\/* ### MENU BUTTON TEXT COLOR WHEN SCROLLED DOWN ### *\/\n.et-fixed-header #top-menu li.cta_menu a {\n\tcolor: #fff !important;\n}<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n