A few months ago I published a tutorial about how to show/hide the vertical navigation of Divi on click  and people started asking me to make a similar tutorial for the normal Divi header bar (the “horizontal” one) too.

So, in this tutorial we will implement a toggle for the Divi header bar which allows opening the navigation only when the user needs it and hide it to free up space for the page content.

The feature is intended to be used with the Default, Centered and Centered Inline Logo header formats both for desktop and mobile menu.

DEMO

To implement this functionality we will use CSS and jQuery.

The header toggle will be added to the page container using a simple jQuery script and then we’ll style it using CSS.

Adding JS

First let’s add the jQuery code into the  Divi Theme Options -> Integration field.

It adds the header toggle with the word ‘MENU’ to the page container and toggles the nav_open and nav_closed classes of the body on click.

Also it triggers the click event on the mobile menu hamburger icon if the dropdown menu is open to close it while hiding the header bar. This is needed so that the dropdown menu does not remain opened when the header bar has been moved out of the viewport.

<script type="text/javascript">
  (function($){
    function dvcs_show_hide_horizontal_menu() {

        /* add nav_closed class to body tag*/
        $('body').addClass('nav_closed');

        /* add the header toggle to page container */
        $('#page-container').prepend('<span class="nav_toggle">MENU</span>');

        /* toggle classes when clicking the menu icon */
        $("#page-container .nav_toggle").on('click', function(event) {		
            $(this).parents('body').toggleClass('nav_open').toggleClass('nav_closed');
      
            /* close the mobile menu dropdown */
            $('.mobile_nav.opened .mobile_menu_bar_toggle').trigger('click');
        });
    }
    $(document).ready(function() {
        dvcs_show_hide_horizontal_menu();
    });
  })(jQuery); 
</script>

Adding Custom CSS

The requirement is that the header bar needs to have the fixed positioning which can be enabled in Divi Theme Options -> Fixed Navigation Bar.

However, currently this option works for the desktop header only but we need the mobile header to be fixed as well and we do that with a single line of CSS.

Now, let’s add the following CSS into Divi Theme Options -> Custom CSS field ( or into the child theme style.css file):

/* Show/Hide Divi Navigation Bar on Click */

/* header toggle */
.nav_toggle {
  display: block;
  position: fixed;
  top: 0px;
  left: auto;
  padding: 2px 8px 0px;
  right: 5%;
  font-size: 12px;
  font-weight: 700;
  background: #617be5;
  color: #ffffff;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.1);
  z-index: 999999;
}
/* header toggle icon */
.nav_toggle:after {
  display: block;
  position: relative;
  text-shadow: 0 0;
  font-family: ETmodules !important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  text-transform: none;
  font-size: 40px;
  content: "\61";
  cursor: pointer;
  top: -7px;
  margin-bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* header toggle icon for visible header bar */
.nav_open .nav_toggle:after {
  content: "\4d";
}

/* remove the page container top padding */
#page-container {
  padding-top: 0px !important;
}

/* hide top header bar */
#page-container #top-header,
#page-container #main-header {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* hide main header bar */
#page-container #main-header {
  top: 0 !important;
}

/* show both main and top headers */
.nav_open #page-container #main-header,
.nav_open #page-container #top-header {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.nav_open.et_secondary_nav_enabled #page-container #main-header {
  top: 31px !important;
}

/* transitions */
#page-container #top-header,
#page-container #main-header,
.nav_toggle {
  -webkit-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}

/* adjustments for mobile header toggle */
@media all and (max-width: 980px) {
  /* make mobile header fixed */
  #main-header,
  #top-header {
    position: fixed !important;
  }
  /* mobile header toggle */
  .nav_toggle {
    padding: 3px 8px 0px;
    right: 8%;
  }
  /* mobile header toggle icon */
  .nav_toggle:after {
    font-size: 28px;
    content: "\33";
    top: -9px;
    -webkit-transform: translateX(-40%);
    -ms-transform: translateX(-40%);
    transform: translateX(-40%);
  }
  /* mobile header toggle icon the visible header bar */
  .nav_open .nav_toggle:after {
    content: "\32";
  }
}

/* END: Show/Hide Divi Navigation Bar on Click */

This CSS applies the header toggle styling similar to the demo but you can change the styling if you need.

It adds the hamburger and X icons for the desktop header toggle and down and up arrow icons for mobile header toggle.

But you can add any other icons you want, the lines with the icon codes are highlited in the CSS provided (make sure the icon code contains only one backslash, not two).

That’s it, copy the code snippets and implement this feature on your Divi sites. If you have any questions and suggestions, feel free to leave them in the comments section below.

View&Download Our Divi Freebies