Divi Desktop Hamburger with Horizontal Menu Reveal

So, we talked before about having a hamburger menu on your Divi desktop site. Usually, that click opens up a vertical dropdown of links. But what if, instead of a dropdown, you just made your regular horizontal menu slide out or fade in when someone clicks that icon? It’s a different vibe, and there are some interesting reasons why you might want to do it this way. Let’s explore how to make this happen and what the pros and cons are.

Why This “Horizontal Reveal” is Different (and Maybe Better?)

Okay, so how is this different from the dropdown thing we talked about last time? Well, the big difference is how the menu shows up. With a regular dropdown, you usually get a vertical list of links appearing below the hamburger icon. With this method, you’re essentially taking your existing horizontal menu and just hiding it until someone clicks the hamburger. Then, it pops into view, often sliding in from the side or just appearing in its usual horizontal layout.

Why might this be a better option for some folks?

• Familiar Look and Feel: Your visitors are already used to seeing your menu in that horizontal layout. This method keeps that familiarity, just tucked away until needed. It can feel a bit more natural than a sudden vertical list for some people.
• Potentially Easier for Complex Menus: If you have a really wide or intricate horizontal menu with lots of sub-levels, displaying it horizontally (even if it slides in) might feel less cramped than trying to fit everything into a vertical dropdown.
• Visual Consistency: If your site’s design heavily relies on that horizontal menu style, this approach maintains that visual consistency even when it’s initially hidden.

However, there’s a potential downside we need to chat about…

The “Maybe Slower” Bit (Especially on Shared Hosting)

Here’s the thing: to make that horizontal menu appear with a cool slide or fade, you’re likely going to need some JavaScript (that’s the jQuery part you mentioned) and maybe some CSS tricks. Now, if you’re on a shared hosting plan (which is pretty common and usually more affordable), your website might not be super speedy to begin with. If you are looking for a good hosting company to host your website, we do have our recommendations on Best Hosting for Divi Websites that may be of interest to you.

Adding extra JavaScript can sometimes make your page load a little slower. The browser has to download that code and then run it to make the menu animation work. If your site already has a lot going on, or if your hosting is a bit sluggish, this extra bit of code could make the initial page load feel a tad longer. It’s something to keep in mind and test!

Ok, now with that all out of the way, let’s build this thing.

Hamburger Tutorial

In order to achieve what we want, we are going to need to make use of some code. This tutorial will make use of both CSS and JavaScript (jQuery) to get the desired result.

You can copy and paste the code below and follow the tutorial in the video above.

CSS ID

dd-hamburger-menu

You can copy and paste the above ID directly into your Divi Menu Module > Advanced > CSS ID/Classes Settings. However if you want to reference the ID via CSS in the Theme Options be sure to add a # before it. It would be #dd-hamburger-menu.

CSS Code

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #8139ff;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#dd-hamburger-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #FFFFFF;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

You can add this into the Divi > Theme Options > General > Custom CSS. If you are not sure, please do watch the video.

JavaScript

<script>
	jQuery(function($){
	$(document).ready(function(){
		var toggleIcon = $('<div class="toggle-icon"></div>');
		var desktopMenu = $('#dd-hamburger-menu .et_pb_menu__menu>nav');
		
		toggleIcon.insertAfter(desktopMenu);
		
		toggleIcon.click(function(){
    	desktopMenu.toggleClass('reveal-menu-items');
  		$(this).toggleClass('icon-switch');
		});
	});
});
</script>

You can add this in at Divi > Theme Options > Integration > Add code to the < head > of your blog.

Once all the code is in place, you can save everything (including your Theme Builder and then it should work for you.

Weighing Looks and Speed

So, showing your regular horizontal menu with a click of a desktop hamburger icon is a cool alternative to the dropdown style. It can feel more familiar and might work better for complex menus. However, especially if you’re on shared hosting, you need to be aware that adding the JavaScript to make this happen could potentially slow down your site a little. It’s all about finding the right balance between the look you want and making sure your website still loads quickly and provides a good experience for your visitors.