How To Make A Divi Sidebar Menu Tutorial by Pee Aye Creative

How To Make A Divi Sidebar Menu

In this tutorial I will show you how to make a fixed and collapsible Divi sidebar menu for your Theme Builder template.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Before We Start

The best place I can think to use this tutorial is by placing the Menu module in a Theme Builder template in a small column with a Post content module in a wider column. This could be for the entire site, or it could be for a custom post type, for example to make a documentation area on your site. This would be perfect for that!

If you want to keep it simple, I recommend checking our previous tutorial about How To Make A Vertical Menu. Chances are you actually need that tutorial instead of this one.

How To Make A Vertical Divi Menu Tutorial by Pee Aye Creative

1. Complete A Separate Tutorial About Collapsing the Mobile Menu Submenus

This tutorial builds on one of our previous tutorials. You will need to complete the other tutorial together with this one to achieve the final result. The other tutorial is about How To Collapse Divi Mobile Menu Submenus.

How To Collapse Divi Mobile Menu Submenus Tutorial by Pee Aye Creative

2. Add A Custom CSS Class To The Menu

The first main step would be to add a custom CSS class to the menu module. We are doing this so that our code only affects this specific module on your site. Open the Divi Menu module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-sidebar-menu” in the CSS Class input field.

adding the CSS class for the Divi sidebar menu

3. Add Some CSS To Adjust The Divi Menu Styling

The next step is to add CSS code which will do most of the work. The CSS is hiding the desktop menu and showing the mobile menu. This is needed since they are totally different, and it would only be relevant to use the mobile menu to create the desired effect. The code is also used to modify some of the styling of the menu. One important part of the code sets a maximum height for the menu, and has an overflow. This means that the as the content of the menu, the links and submenus, get longer, the menu will show a scrollbar and scroll down. You can choose to modify or even remove this as needed. There is also code that styles the scrollbar to make it look nice. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*hide desktop menu*/
.pa-sidebar-menu .et_pb_menu__menu,
.pa-sidebar-menu .mobile_menu_bar:before {
	display: none !important;

/*display mobile menu container on desktop*/
.pa-sidebar-menu .et_mobile_nav_menu {
	display: block !important;
	width: 100%;

/*display mobile menu on desktop*/
.pa-sidebar-menu .et_mobile_menu {
	display: block !important;
	position: relative;
	border-top: none;

/*hide point on top from prerequisite tutorial*/
.pa-sidebar .et_mobile_menu:after{
  display: none;

/*hide bullet lists from menu*/
.pa-sidebar-menu li {
	list-style: none;

/*style the menu, add overflow, set height*/
.pa-sidebar-menu {
	max-height: 50vh !important;
	overflow-y: auto;
	border: 2px solid #000;
	box-shadow: none;

/*adjust the width of the entire scrollbar*/
.pa-sidebar-menu::-webkit-scrollbar {
	width: 10px;

/*set a color for the scrollbar track*/
.pa-sidebar-menu::-webkit-scrollbar-track {
	background: #ffffff;

/*style the scrollbar thumb*/
.pa-sidebar-menu::-webkit-scrollbar-thumb {
	background-color: #00d263;
	border-radius: 20px;
	border: 2px solid #ffffff;

As you can see, each of the snippets are labeled and hopefully helps explain what each one does. As always, the video embedded in the post above will be the best resource to learn about what the code is doing and see it in action. 

4. Add Some jQuery To Open The current Divi Menu Submenu

This last step is not required, but is a pretty cool bonus that I wanted to include. This is something I created when I wanted to build a documentation site for some of my WordPress plugins. The jQuery code automatically will open a specific submenu if the current page link is inside that submenu. In other words, if all the submenus are closed but you click a link to a menu item that is in a submenu, that submenu will be opened on page load and remain open.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

jQuery(document).ready(function() { 
    if(jQuery('.pa-sidebar-menu .menu-item-has-children').hasClass('current-menu-parent')){
        jQuery('.pa-sidebar-menu .current-menu-parent ul.sub-menu').addClass('visible');
        jQuery('.pa-sidebar-menu .current-menu-ancestor > ul.sub-menu').addClass('visible');

Last updated May 9, 2023 @ 5:50 pm


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Submit a Comment

Your email address will not be published.

Recent Posts


Your Cart