Here’s a neat way to getting two menus to work in the header. One regular, and one mobile dropdown. A friend asked if I could make something like a layout from a website he thought was pretty cool. (Leslie, from https://agirlandhermac.design/ to properly credit the inspiration) So I tried a couple of different ways of achieving this.

Here’s what it looks like:

I decided to make this tutorial with a solution that:

a. stuck with Divi’s assets and behavior as much as possible

b. used the newly updated Divi header file. (There aren’t any cosmetic changes, but the structure has changed slightly, making a huge difference in editing the php file)

Before we start

The header.php file is going to be edited, so you need a child theme.


Click this text to go get a free child theme.

Still here? Coolio.

The Video

Watching the video will probably help a bit:

The php edit

So, open the header.php file (either in wp-admin > Appearance > editor > header.php, or, through FTP in a text editor) and locate the secondary menu. It’ll be in line 80.

The div should look like this:

<div id="et-secondary-menu">
    There will be a bunch of PHP code here. 
    I can't paste it here because it causes problems, 
    but just select the code all the way down to... 
</div> <!-- #et-secondary-menu -->	

 

Take that whole div and move it all the way down to where the

<nav id="top-menu-nav">

is. You’re going to drop the copied code right above that nav element.

So it’ll look like this:

 

The setup

Now the text menu will be the secondary menu, and the hamburger will be the primary menu.

Assign your menus, and then go on to style them in the next section. woot

The style edit

Add this CSS snippet anywhere you normally add extra CSS.
(Divi theme options, theme customizer > custom CSS, child theme stylesheet, etc)

#top-header {
	display: none;
}
#top-menu.nav {
	display: none;
}
.et_fixed_nav #et-top-navigation {
	display: flex;
}
#et-secondary-menu {
	margin-right: 22px;
}
/* This is where you style the text menu */
#et-info, #et-secondary-menu > ul > li a {
	font-size: 18px;
	color: #444; 
}
@media all and (min-width: 981px) {
	#et_mobile_nav_menu {
		display: block;
	}
	.et_mobile_menu {
		width: 30%;
		right: 0;
		left: auto;
		padding: 20px;
	}
	/* These guys are hidden on desktop to avoid double-upping menu items */
	.menu-item-118, 
	.menu-item-119 {
		display: none;
	}
}

and you’re done!

Note: Make sure you hide the doubled menu items.

Also, if you want to change the hamburger icon, click this:

 

If you can’t be bothered to do any of this, then download this file:

and unzip. You’ll see header.php and untitled.css

copy header.php into the child theme’s root folder, and open the css file, copy the css and drop it into a custom css field. (Theme options > custom CSS)

Edit some of the CSS to fit what you want, and you’re done!

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Other header tutorials





 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

Photo by Seth Doyle on Unsplash