How To Customize And Style Divi Navigation

Today I’m going to show you how to create and customize the navigation in Divi.

‍

The desktop view will be straight-forward with the logo on the left and menus on the right, but for the mobile view, aside from the hamburger menu, I’m going to add a phone icon and an envelop icon. Since the majority of website visitors today are using mobile phones, it will be easier for them to send you a message or even call you; there is no need for them to click on the hamburger menu to display all links.

Let’s begin!

Create a page by navigating to Pages, then Add New. You can name it anything you like.

‍

Next, go to Appearance, then Menus, and name your menu anything you like. I will name mine “Divi Custom Menu”. Next, go to Custom Links and create About Us, Services, and Solutions links. You may also use pages or posts if you have those pages ready, but for this demo, let’s just use custom links.

I named mine How To Customize Menu. For the URL just put a number sign for now since this will be just a demo.

After adding those menus, select the primary menu and click the save menu button.

‍

Next, navigate to Divi, then Theme Builder. Since this will be a demo, I am not going to use the global default website template. Instead, I will add a new template and assign it to the newly added page.

Delete both the global header and footer, select Add custom header, then choose Build custom header.

We need to create two different sets of menus, one for the desktop and another one for the tablet and mobile.

‍

Add a menu module and select and customize the menu based on the design mock-up.

You can play around with font and logo sizes as long as they won’t break when you resize your browser window.

‍

Next, add the contact us button and customize it based on the design, then create another button for the phone number.

‍

After creating the contact us button, you need to go to layer then column settings, navigate to advanced tab and open custom css and add “display flex” code

Again, I will play around with the sizes and alignments until they are all in their proper places.

Since there will be two menus to create, the first one will be for desktop and the other one will be for tablet and mobile phones. We need to toggle the visibility of those menus.

Add a new regular section. This section is for the mobile menu. Add a menu module. You may also need to edit the visibility of this new section and disable it for desktop view.

‍

.et_pb_menu_1_tb_header .mobile_nav .mobile_menu_bar:before {
	color: #ffffff !important;
	background-color:#000000;
	border-radius:5px;
	display:block;
	padding: 4px;
	top: -1px;
}

Phone Icon: &#xe090;
Email Icon: &#xe076;

‍

Add a new button for the phone icon and another button for the mail icon; you may need to install the font found at the URL below in the description section of this video; the title of the website is The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web. After installation, you can now use their icons for both buttons.

https://www.elegantthemes.com/blog/resources/elegant-icon-font

After finishing the navigation, I will now setup the page that I have created and apply the navigation.

‍

To overlap the navigation with the background image, use the section settings and navigate to the advanced tab. Open the position panel and select fixed.

There you have it, my own way of customizing the Divi menu.

‍