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.
Also, if you want to show/hide the normal navigation bar (the “horizontal” one) the same way on click then read this tutorial: Show/Hide Divi Navigation Bar on Click.
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 ;)
Hello,
would you tell us how to use this for a normal menu modul (divi theme)?
this will be great :)
Hi Janik.
This code works with the Divi theme default Vertical menu, it adds the menu toggle if the vertical menu is present on the page. You could make it work for the menu created using the Divi Menu module by assigning it a specific CSS class/ID and then target this menu by using that class/ID (you need to update the selectors in the JS and CSS snippets accordingly).
this was very helpful
Hi Ivan
I purchased your Plugins Desktop Menu Customizer, is this Tutorial as an option available?
thanks best regards
Jonas
Hi Jonas.
No, Divi Desktop Menu Customizer plugin does not have this feature.
Hey! I love this so much! Thank you! I want to add a text on the side of the hamburger and close icon, how do i do this? :)
Thanks Ivan for this great article. I’ve one question for you. How can we close the vertical menu on click of any menu item on one page scroll website? so the vertical menu automatically closes when user click on any menu link.
Thanks in advance!
You need to set a click event for the menu items which would trigger a click on the menu toggle.
Add this into the
show_hide_vertical_menu()function after the line 11:/* close menu on menu item click */$(".et_vertical_nav #main-header li > a").on('click', function(event) {
$(".et_vertical_nav .vert_nav_switch").trigger('click');
});
thanks Ivan,
this solved my problem ,
but i have one query,
i want this slider only for mobile version only,
and little bit wider .
can u help please,
Someone else asked about this awesome site – downsviewkitchens.com – I am trying to replicate this look, and your tutorial helped a lot, but I still can’t get the vertical menu to slide out from the hamburger – I don’t care if the hamburger is in the middle or not, I just like that the menu starts off narrow, and opaque, and then opens with navigation that is somewhat transparent. I am pretty sure I can get the colors and transparencies correct, just can’t get the menu to collapse like this example.
Awesome Ivan!
Was looking for this everywhere and you did it! Work great just want a few styling tips is possible. Is it possible to have a vertical bar with the hamburger menu on the left side like this site : downsviewkitchens.com ?
Also how to move the hamburger menu around to a different area? lower or a little to the right for left side use?
Thank you again for all your help!
Find the following part of the CSS above and adjust the
topandleftproperty values to change the positioning of the hamburger icon:/* 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;
}
Awesome Ivan! Thank you. Is there a way to also have the grey background for the icon top to bottom vertically before the menu is open? Thanks again…great!
Thank you so much for this!! It was very helpful :)
I have one question, can you tell me how to remove the arrow that beside the items with sub menu? Thx
Hi Yael,
try this CSS:
.et_vertical_nav #top-menu .menu-item-has-children > a:first-child:after {content: "";
}
Thank you sooo much!!!
Just wanted to thank you for sharing this and answering all the comments. I was having trouble implementing this feature on my own and you hit the nail on the head! Keep up these great posts. You gained a new reader and subscriber today!
Thanks Manny, I’m glad to know it was helpful :)
Hi Ivan, really definitive article, with lots of helpful code in the comments.
Is there a way to activate the vertical menu in other ways besides a click?
ie.
• The menu “slides in” on a page load, not a click
• The menu starts off open (click to close)
Both would be great options!
Hi Ivan,
Thanks so much for posting this, it is exactly what I have been looking for… I tried and failed for a long time to replicate the menu on the ‘besuperfly’ site.
Is it possible to add the text “menu” or any text just under the hamburger?
Thanks again, your answers to past questions have been very helpful and helped me understand the coding better.
Hi Jason.
I’m glad this tutorial is helpful. Yes, you can add text to the hamburger, find the
line 7of the provided jQuery script and add any HTML and text inside the.prepend()method:/* add the menu icon to page container */
$('.et_vertical_nav #page-container').prepend('');
Then style it with CSS the way you want.
Hope this helps.
Really, really helpful. Thanks Ivan!
Hello! How exactly should the text “MENU” be added inside the prepend? and after/to the right of the hamburger? Sorry I know little about scripts :(. Thanks!
Add the word MENU in between the span tags on line 7 of the JS script.
Hi Ivan,
i really love this tutorial! It is a great solution for me!
I have just one question.
Is there a way to do same thing with horizontal navbar?
This would be so awesome for me and would help me alot!
Thanks!!
Hi Cem.
Yes, you can do that too. Check out this tutorial: Show/Hide Divi Navigation Bar on Click
Thanks for this! I do have one request: can you have it so that the “X” simply replaces the hamburger menu, instead of moving to the edge of the menu? So if you want to close the menu, you don’t have to move across the menu to get to the “X”.
Hi Danny.
Yes, you can do that. For the Left vertical navigation find the following snippet and set the
leftvalue to10px:/* move menu icon to left when menu is open */
.vert_nav_open .vert_nav_switch {
left: 10px;
}
And for the Right vertical navigation find and and change the
rightvalue to10px:/* move menu icon to right when right vertical menu is open */
.et_vertical_right.vert_nav_open .vert_nav_switch {
right: 10px;
}
Or you may simply remove/comment out these snippets and the ‘X’ icon will not move.
Thanks for the quick reply. I tried it and it seems that the “X” ends up behind the menu. I tried adjusting z-index, but it still doesn’t end up on top.
Try this
z-index, works for me:.vert_nav_switch {
z-index: 999999;
}
That did it! Thanks so much for this!
Hi Ivan,
I’m curious as to how this would work on a larger tablet device in widescreen, many of which have screen widths greater than 1000px. Does the ‘click’ function still work or is something else required?
Thanks
Hi Richard.
Yes, it will work on larger tablet screens too. What is important is that it should not interfere with the mobile menu, that’s why I’ve used the
@media all and (min-width: 981px){...}query for CSS.thank you so much for sharing this!! It will be perfect in my website
Thank you so much for this article ! Would you know how to change the color of the lines to open the menu and de X ?
Use this:
.vert_nav_switch:before {
color: #000000; /* set color here */
}
Dear Ivan,
thanks a lot for all your posts about vertical navigation.
Is there a way to have a vertical navigation on the right side and the logo on the left. I tried it with the header.php file but can’t get it to work.
Any hint would be helpful – thank you. tom
Dear Ivan,
thanks a lot for this nice code – it works great!
is there a way to close a menu item automatically, if i click on another one to open? (toggle)
thanks in advance!
Hi Celia,
Check out the Expand and Collapse Divi Vertical Menu Submenus on Click tutorial and this comment of mine in particular.
Hope this helps.
Thank you so much for this, really helpful!
Is there any way I can have the menu show by default but have the X display to close it down should I wish to at all, please?
Change the
vert_nav_closedclass tovert_nav_openon line 5 of JS code:$('body.et_vertical_nav').addClass('vert_nav_open');
Thanks for this code :) Is it possible to have the vertical menu take over the full screen when clicked?
Yes, it is possible to do that with CSS but why don’t you use the Fullscreen header instead?
I looked at the fullscreen header but I need the vertical white strip with the logo on to start with along with a menu button, and then when the menu button is clicked it slides in to take over the screen and the menu links appear. Probably a lot of css work?
I haven’t tried it myself but it shouldn’t be much work I believe.
Right now Divi swaps to the mobile menu at ~981 pixels. Is there a way to keep the right vertical menu at all screen sizes?
Hi Mike,
yes, it is possible to do with CSS but if you want the menu to be vertical on all devices then why don’t you use the Slide In header instead?
That works. Thanks!
Hi, I know this is an older post, so this may go unanswered. I have implemented this code and it is great! However, I was wondering if it would be possible to have the jquery adjust the content margin when the button is clicked so that the menu moves the whole page rather than covering up a portion of it.
Hi Dakota,
no need to use jQuery for that, just add this CSS:
/* transition main area and header margins */
.et_vertical_nav #et-main-area,
.et_vertical_nav #top-header {
-webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-o-transition: margin-left 0.5s ease, margin-right 0.5s ease;
transition: margin-left 0.5s ease, margin-right 0.5s ease;
}
/* push page content when left vertical menu opened */
.et_vertical_nav.vert_nav_open #et-main-area,
.et_vertical_nav.vert_nav_open #top-header {
margin-left: 225px !important;
margin-right: -225px !important;
}
/* push page content when right vertical menu opened */
.et_vertical_nav.et_vertical_right.vert_nav_open #et-main-area,
.et_vertical_nav.et_vertical_right.vert_nav_open #top-header {
margin-left: -225px !important;
margin-right: 225px !important;
}
Works for both Left and Right vertical menus.
P.S. Feel free to leave comments on any of the posts regardless if it is old or new, I try to reply to each comment as soon as I can.
Thank you so much for your help! This solved all my problems!
You are most welcome :)
Im a beginner, maybe thats why I cant seem to make it work?
Im confused, should I paste only the right vertical snippet to the navigation tab?
there are so many sets of code here I dont know which one to use
Hi moriah,
to make things simpler for you just use the JS snippet under the Adding JS heading and the very last CSS snippet under the Bringing all of the CSS together heading.
Hope this helps.
It worked!
Thanks Ivan :D
G’day Ivan,
I have implemented your code, and it’s great! Thank you!
But I want the Vertical Nav menu to be wider, and I did it :)
But…
•••Now the submenus, instead of deploying off the Vertical Menu, now deploy over the Vertical Menu.
This is the code I used to make the Vertical Menu’s wider.
I also adjusted where the Hamburger stack deployed.
/* 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;
width:30%;
}
/* 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: 29%;
}
/* END RIGHT VERTICAL NAVIGATION */
How to have the submenu deploy of the Vertical Menu, like it does before I adjust the width?
Thank you for your time.
Sincerely, Will.
Hi Will,
you need to adjust the
rightoffset of submenus, add this CSS into the@mediaquery:/* adjust right offset of submenus */
.et_vertical_nav.et_vertical_right #main-header #top-menu li ul {
right: 100%;
}
/* adjust right offset of the 1st level submenus */
.et_vertical_nav.et_vertical_right #main-header #top-menu > li > ul {
right: calc(100% + 40px);
}
Hope this helps.
Thank you so much for this! Would you know how to make this open on hover instead than by a click?
Thanks!
Hi Marie-Eve,
thanks for asking this question.
Yes, it is possible to do that, here is the updated jQuery snippet:
(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('');
/* 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');
});
/* open the header when hovering over the menu icon */
$(".et_vertical_nav #page-container .vert_nav_switch").on('mouseover', function(event) {
if( ! $(this).parents('body').hasClass("vert_nav_open")) {
$(this).parents('body').addClass('vert_nav_open').removeClass('vert_nav_closed');
}
});
/* close the header when mouse leaves the header */
$(".et_vertical_nav #main-header").on('mouseleave', function(event) {
if( $(this).parents('body').hasClass("vert_nav_open")) {
$(this).parents('body').removeClass('vert_nav_open').addClass('vert_nav_closed');
}
});
}
$(window).load(function() {
show_hide_vertical_menu();
});
})(jQuery);
This will make the vertical header slide-in when you hover over the hamburger icon and slide-out when the cursor leaves the
#main-header(the menu itself). However, the header won’t close(slide-out) if the cursor leaves the#main-headervia the menu X icon(by passing over the X icon), it will stay open untill you click the X icon. Thus you’ll be able to control the header state both by hovering over and clicking.Hope this helps.