Create a Dynamic Slide-Down Push Menu in Divi

Have you ever found your website’s header taking up too much precious screen real estate, especially on smaller devices? Or perhaps you’re looking for an innovative way to present a secondary navigation or special content that appears only when needed, without hiding your main page elements. If so, you’re in the right place!

While pop-up and slide-in menus are popular, they often overlay your page content, obscuring what’s underneath. But what if your menu could smoothly appear from the top, intelligently pushing your entire page content down so nothing is ever hidden from view? This unique approach not only saves valuable “above the fold” space but also creates a delightful and intuitive user experience.

Unveiling the Slide-Down Push Menu

In this tutorial, we’re going to show you how to build precisely such a slide-down push menu right within the powerful Divi Theme Builder. This innovative menu slides seamlessly into view from the top of your header, and as it descends, it gently “pushes” the rest of your page content down. The result? A perfectly clean, engaging interaction where all your main content remains visible and accessible.

This isn’t just about functionality; it’s about adding a layer of sophistication and thoughtful design to your Divi website. Once built, this custom menu section becomes an incredibly versatile tool. You’ll be able to fill it with any content you desire using the familiar Divi Builder – whether it’s a secondary navigation, social icons, contact information, a search bar, or even promotional content.

For a complete, step-by-step visual guide on how to implement and customize your slide-down push menu, be sure to watch our detailed video tutorial:

Video coming soon!

Your Code for the Divi Slide-Down Push Menu

To bring this dynamic slide-down push menu to life, you’ll need to add a few pieces of code to your Divi website. The video tutorial above will walk you through exactly where to place each snippet (e.g., within Divi’s Theme Options Custom CSS, a Code Module in your header, or a custom JavaScript file).

CSS Classes

First, you’ll need to apply specific CSS Classes to certain Divi elements in your header or layout to ensure the code targets them correctly. The video tutorial above will guide you on where to add these classes in the Divi Builder.

Push Menu Section Class

dd-push-menu

Hamburger Menu HTML

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

Hamburger Menu Class

dd-push-menu-toggle

Custom CSS Code

This CSS will handle the styling, positioning, and animation of your slide-down menu. Remember to include the <style></style> tags when copying the code below.

<style>
.line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #121212;
  opacity: 1;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}
.line-2 {
  top: 10px;
}
.line-3 {
  top: 20px;
}
.dd-push-menu-toggle.open .line-1 {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.dd-push-menu-toggle.open .line-2 {
  display: none;
}
.dd-push-menu-toggle.open .line-3 {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dd-push-menu {
  display:none;
}
.et-fb .dd-push-menu {
  display:block;
}
.dd-push-menu-toggle {
  cursor:pointer;
}
</style>

Custom JavaScript Code

This JavaScript will control the toggle functionality, making the menu slide down and push content as intended. Remember to include the <script></script> tags when copying the code below.

<script>
(function($) {
  $(document).ready(function(){
    $('.dd-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.dd-push-menu').slideToggle( "300").toggleClass('dd-push-menu-active');
    });
  });  
})( jQuery );
</script>

A Responsive & Engaging Header Solution

And there you have it! By leveraging the power of the Divi Theme Builder, a few crucial CSS Classes, and a touch of custom code, you can create a highly functional and visually engaging slide-down push menu for your website. This approach not only optimizes your header space but also provides a unique, user-friendly interaction that ensures your content is always visible.

Experiment with different designs and content within your new push menu. We’re excited to see how you use this technique to enhance your Divi projects! Don’t forget to share your creations or ask any questions in the comments below. Happy designing!