R38: How to Show a Default and Hamburger Menu at the Same Time

As is the case with most of my tutorials, today’s recipe is the result of questions from the Divi Facebook Community. I am going to show you how to display two menus at the same time, one with the default menu style and one with a hamburger icon, using either of the slide-in or fullscreen header options.

This question has been asked many times, but I have yet to see a good solution without using a plugin or extensive unnecessary code, so I thought I would create one.  I call it the ‘Divi Double Menu’

You would perhaps think you could achieve this effect using the secondary menu position for one of your menus. Unfortunately not so, as Divi merges both the primary and secondary menus into one when using either the slide-in or fullscreen header options.

The beauty of this solution is that it utilises everything already built into Divi so it’s super easy to edit, and the additional code is very minimal too.

So let’s get cooking!

Ingredients

The latest version of the Divi Theme from Elegant Themes.

An active child theme – we are going to be adding a header.php file (or editing it if you already have one) so a child theme is imperative if you don’t want the effect overwritten when you update Divi.

Cooking time

This should take around 30 minutes.

Preparation

For the prep we going to set up our header layout in the customiser.

Navigate to Divi > Theme Options > Customiser. Once there, click on Header & Navigation > Header Format and select either the Slide In or Fullscreen option. I am using the Slide In but this recipe will work for both without any changes needed. Be sure to hit Publish to save your changes.

Now you can select what you want to display in the Header Elements section. For the purposes of this recipe I selected to display the search field and social icons but I have left pretty much everything else at their defaults, only reducing the Logo Max Height value. I suggest you leave everything at their defaults also until you have this set up, then once it is working you can go back into the customiser and start tweaking.

Ok, that’s our prep done. Time for the method.

Method

We’ll start by setting up our menus. We will need two, one with all our links and one with the links we only want to show in the default style menu.

So head over to Appearance > Menus and create a new menu. Give the menu a name, I am calling mine ‘Main menu’. This is the menu we are going to display in the default style next to the logo.

Add your menu items as you usually would but DO NOT select a menu location, we are going to be using this menu in a fullwidth menu module. Be sure to Save your menu.

Now create a second menu and give it a name, I am calling mine ‘Slide In Menu’. With this menu, you first want to duplicate the menu you just created, add all the items you added to the previous menu first, and then below that add the items you only want to show in the slide in or fullscreen menu. Then select Primary Menu under Menu Settings > Display Location and hit Save Menu.

The reason we duplicated our first menu is because, when viewed on tablets and mobiles all menus, including the fullwidth menu module, will switch to the hamburger icon, and showing two hamburger icons is going to confuse your users. So we want two menus on desktop, but a single menu on tablets and mobiles.

To achieve this, we are going to add a custom CSS class to the duplicated menu items in our second menu so we can hide them with CSS a little later in this recipe.

Expand each of the duplicated items in the second menu and add the class ds-hide-menu in the CSS Classes (optional) field. If you have any sub menu items you don’t need to bother adding the CSS class to these (but it won’t hurt), the sub items will be hidden if the parent item has the class.

If you don’t see the CSS Classes field, scroll to the top of the page and click on Screen Options in the right hand corner, click the CSS Classes checkbox and the field will then show under your menu items.

Once you have added the class ds-hide-menu to all of the menu items you duplicated from the first menu, hit Save Menu again.

Now we need to set up our fullwidth menu module. We are going to do this with a library layout so we can then add it to our child theme but still have it editable from within Divi.

Navigate to Divi > Divi Library and click Add New.

Give your layout a name, I am calling mine ‘Main Menu‘ as that is what I called the menu I created to be used with this module. Set the Layout Type to Fullwidth Section and make it Global. It doesn’t have to be global as we are not likely to use it anywhere else on our site but it doesn’t hurt to do this. Then hit Submit Query. (Has it always said Submit Query? I never noticed before but that is strange wording )

Click on the Section Settings icon and then in the Advanced tab give the section a CSS Class of ds-main-menu

Then scroll to the bottom and Disable the section on Phone and Tablet.

Next, click on the Design tab and in the Spacing section add a right margin of 50px and a left margin of 15% , then Save & Exit.

Now, in your section, click on Insert Module (s) and select the Fullwidth Menu module.

Select the first menu we created (Main Menu) in the dropdown.

Now go to the Design tab and set Make Menu Links Fullwidth to Yes and make sure the Text Orientation is set to Left.

You can now change any of the other styling you want but I would suggest going back to do this once everything is set up and working.

Finally, hit Update on the page to publish your layout. Then look up at the the URL in your browser’s address bar and make a note of the layout ID# (we are going to need it in the next step). It will be the number you see after wp-admin/post.php?post=, shown here as 123, but the number could be anything from two to 6 digits or more depending on the size of your site.

Next, we are going to add this new layout to our child theme. If you don’t already have a header.php file in your child theme, you need to download the latest version of Divi and unzip it. Then in the root Divi folder, copy the header.php file and paste it into the root folder of your child theme.

Once you have the header.php file in your child theme, go ahead and open it in your favourite code or plain text editor.

We are going to insert our fullwidth menu layout into the header using a php echo. Depending on which version of Divi you are using (this recipe was created using version 3.0.105), your header.php file may look a little different. So run a search for ‘logo_container‘, there will only be once instance of it and the code should look something like this:

Directly underneath this, we need to add the echo to display our menu layout. I can’t post the code here or it messes with my layout so click here to download a zip file containing the required php echo in a text file. Copy and paste the code directly below the closing div shown in the image above.

Change the 123 in the code you download to the ID# of the layout that we made a note of earlier. When you are done, this section of code should look something like this, you can see the php echo between the logo and the menu:

Now save your header.php file and upload it to the root of your child theme either via FTP or cPanel. We are almost done.

The last step is to add our CSS, here is what we are doing:

Firstly we position our menu section absolutely, so it doesn’t knock the logo and slide in menu out of place.

Then we add a transition to the section, menu, and menu when fixed navigation is active. This is so our menu appears to gradually shrink with the rest of the header when the user scrolls.

.ds-main-menu {
    position: absolute;
}

.ds-main-menu,
.ds-main-menu .et_pb_fullwidth_menu .fullwidth-menu-nav > ul,
.et-fixed-header .ds-main-menu .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

Next we are adjusting the padding of the menu items when the fixed navigation is active. If you change the height of the header in the customiser, you will need to adjust these padding values a little so your menu sits at the vertical center and doesn’t overflow the header area.

Then we adjust the left margin. We set the left margin at 15% in the section settings earlier but that applies to the header when fixed navigation is not active. By default, when you scroll your logo will shrink slightly, and we want the menu to move to the left as the logo shrinks, so here we have reduced the margin to 10% when fixed navigation is active. You may need to adjust both the 15% in the section settings and the 10% here depending on the width of your logo.

.et-fixed-header .ds-main-menu .et_pb_fullwidth_menu .fullwidth-menu li > a {
    padding-bottom: 15px !important;
}

.et-fixed-header .ds-main-menu .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
    padding: 15px 0 0 !important;
}

.et-fixed-header .ds-main-menu {
    margin-left: 10% !important;
}

And finally a media query. All we are doing here is hiding the duplicate menu items in our slide in/fullscreen menu on desktop.

@media all and (min-width: 981px) {
    .ds-hide-menu {
        display: none;
    }
}

Copy the complete CSS with comments from the toggle below and paste into your child them stylesheet, save and upload it and you’re done.

And that’s it. Now you can display two seperate menus without using a plugin or tons of code!

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X