Show and Hide Divi Vertical Navigation on Click

by | Oct 9, 2018 | 2 comments

In this tutorial we will learn how to show and hide Divi Vertical Navigation on click. This trick works for all three Divi header formats having the Vertical Navigation option: the Default, Centered and Centered Inline Logo headers.

By default the vertical navigation appears either on the left or right hand side (depending on the settings applied) and occupies a 225px width of page space which is not always desirable. So, if you want to free up some more space for your page content while still having the vertical menu then this tutorial is exactly what you need.

But you might ask why would we need this if Divi already has the Slide In header format?

Well, the Slide In header format has the same vertical layout both on desktop and mobile devices sliding in from the right. But if you want to have a slide-in vertical navigation on desktop but a dropdown menu on mobile then this will be a good alternative solution for that.

Watch the quick demo below to see it in action.

Demo

Implementation

The vertical navigation will be opening/closing by clicking the menu icon which will be a hamburger icon for closed and an X icon for the opened state of the navigation.

We will use a bit of jQuery to add this icon to page container and add a click event to it, and the rest will be done using CSS.

Adding JS

First let’s add the following jQuery snippet to Divi -> Theme Options -> Integration tab -> Add code to the < head> of your blog field.

<script type="text/javascript">
  (function($){
    function show_hide_vertical_menu() {
    /* add vert_nav_closed class to body tag*/
    $('body.et_vertical_nav').addClass('vert_nav_closed');
    /* add the menu icon to page container */
    $('.et_vertical_nav #page-container').prepend('<span class="vert_nav_switch"></span>');
    /* toggle classes when clicking the menu icon */
    $(".et_vertical_nav #page-container .vert_nav_switch").on('click', function(event) {		
      $(this).parents('body').toggleClass('vert_nav_open').toggleClass('vert_nav_closed');
    });
    }
    $(window).load(function() {
      show_hide_vertical_menu();
    });
  })(jQuery); 
</script>

This code adds the vert_nav_closed CSS class to the body tag on page load, inserts the menu icon into the page container and adds a click event to it which toggles the vert_nav_closed  and vert_nav_open classes in the body tag.

Adding CSS

Next, let’s set icons for the open and closed states and apply some styling.

/* menu icon */
.vert_nav_switch:before {
  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;
  speak: none;
  font-size: 60px;
  content: "\61";
  cursor: pointer;
}
/* change menu icon to X when menu open */
.vert_nav_open .vert_nav_switch:before {
  content: "\4d";
}

The next two CSS snippets need to be used separately depending on the vertical menu orientation set for your site: left or right. But it won’t do any harm if you use them all together as well, it will still work just fine whenever you switch the vertical menu orientation.

This CSS is for the Left Vertical Navigation

/* LEFT VERTICAL NAVIGATION */
/* remove margin-left from main area and top header */
.et_vertical_nav #et-main-area, 
.et_vertical_nav #top-header {
  margin-left: 0px !important;
}
/* hide vertical header */
.et_vertical_nav #page-container #main-header {
  left: -225px;
  -webkit-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
}
/* show vertical header */
.et_vertical_nav.vert_nav_open #page-container #main-header {
  left: 0px;
}
/* menu icon container */
.vert_nav_switch {
  position: fixed;
  top: 0;
  left: 10px;
  z-index: 99999;
  -webkit-transition: left 0.5s ease;
  -o-transition: left 0.5s ease;
  transition: left 0.5s ease;
}
/* move menu icon to left when menu is open */
.vert_nav_open .vert_nav_switch {
  left: 225px;
}
/* END LEFT VERTICAL NAVIGATION */

And this snippet is for the Right Vertical Navigation

/* RIGHT VERTICAL NAVIGATION */
/* remove margin-right from main area and top header */
.et_vertical_nav.et_vertical_right #et-main-area, 
.et_vertical_nav.et_vertical_right #top-header {
  margin-right: 0px;
}
/* hide right vertical header */
.et_vertical_nav.et_vertical_right #page-container #main-header {
  right: -225px;
  -webkit-transition: right 0.5s ease;
  -o-transition: right 0.5s ease;
  transition: right 0.5s ease;
}
/* show right vertical header */
.et_vertical_nav.et_vertical_right.vert_nav_open #page-container #main-header {
  right: 0px;
}
/* right vertical menu icon container */
.et_vertical_right .vert_nav_switch {
  position: fixed;
  top: 0;
  left: auto;
  right: 10px;
  z-index: 999999;
  -webkit-transition: right 0.5s ease;
  -o-transition: right 0.5s ease;
  transition: right 0.5s ease;
}
/* move menu icon to right when right vertical menu is open */
.et_vertical_right.vert_nav_open .vert_nav_switch {
  right: 225px;
}
/* END RIGHT VERTICAL NAVIGATION */

Don’t forget to wrap the whole CSS into the following media query so that it does not break the mobile menu.

/* Show/Hide Divi Vertical Menu on Click */
@media all and (min-width: 981px){
  
  /* CSS here ... */
  
}
/* END: Show/Hide Divi Vertical Menu on Click */

Bringing all of the CSS together

Now let’s bring all of the CSS snippets together and wrap them into the media query mentioned above.

/* Show/Hide Divi Vertical Navigation on Click */
@media all and (min-width: 981px){
  /* menu icon */
  .vert_nav_switch:before {
    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;
    speak: none;
    font-size: 60px;
    content: "\61";
    cursor: pointer;
  }
  /* change menu icon to X when menu open */
  .vert_nav_open .vert_nav_switch:before {
    content: "\4d";
  }

  /* LEFT VERTICAL NAVIGATION */
  /* remove margin-left from main area and top header */
  .et_vertical_nav #et-main-area, 
  .et_vertical_nav #top-header {
    margin-left: 0px !important;
  }
  /* hide vertical header */
  .et_vertical_nav #page-container #main-header {
    left: -225px;
    -webkit-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }
  /* show vertical header */
  .et_vertical_nav.vert_nav_open #page-container #main-header {
    left: 0px;
  }
  /* menu icon container */
  .vert_nav_switch {
    position: fixed;
    top: 0;
    left: 10px;
    z-index: 99999;
    -webkit-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }
  /* move menu icon to left when menu is open */
  .vert_nav_open .vert_nav_switch {
    left: 225px;
  }
  /* END LEFT VERTICAL NAVIGATION */

  /* RIGHT VERTICAL NAVIGATION */
  /* remove margin-right from main area and top header */
  .et_vertical_nav.et_vertical_right #et-main-area, 
  .et_vertical_nav.et_vertical_right #top-header {
    margin-right: 0px;
  }
  /* hide right vertical header */
  .et_vertical_nav.et_vertical_right #page-container #main-header {
    right: -225px;
    -webkit-transition: right 0.5s ease;
    -o-transition: right 0.5s ease;
    transition: right 0.5s ease;
  }
  /* show right vertical header */
  .et_vertical_nav.et_vertical_right.vert_nav_open #page-container #main-header {
    right: 0px;
  }
  /* right vertical menu icon container */
  .et_vertical_right .vert_nav_switch {
    position: fixed;
    top: 0;
    left: auto;
    right: 10px;
    z-index: 999999;
    -webkit-transition: right 0.5s ease;
    -o-transition: right 0.5s ease;
    transition: right 0.5s ease;
  }
  /* move menu icon to right when right vertical menu is open */
  .et_vertical_right.vert_nav_open .vert_nav_switch {
    right: 225px;
  }
  /* END RIGHT VERTICAL NAVIGATION */
  
}
/* END: Show/Hide Divi Vertical Navigation on Click */

Add this CSS either into Divi -> Theme Options -> Custom CSS field or to you child theme style.css file and save.

If you want to expand/collapse the submenus of the Vertical Navigation on click (rather than showing on hover) check out the following tutorial: Expand and Collapse Divi Vertical Menu Submenus on Click , these two tricks work very well with each other.

That’s all, hope you’ll find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated 😉

Pin It on Pinterest

Shares
Share This