How To Make A Divi Sidebar Menu

by | Dec 30, 2023 | Tips & Tricks, Tutorials | 0 comments

Ever faced the challenge of designing a captivating layout with the Divi Theme Builder, only to realize the need for a stylish sidebar menu? In this tutorial, we will show you how to make a fixed and collapsible Divi sidebar menu for your Theme Builder template.  Without any more delay, let’s jump right in and get started!

Placing the Menu Module in a Theme Builder Template

Imagine you’re designing a webpage using Theme Builder. You’ve got this cool Menu module, right? Try placing it in a small column next to another module in a wider column. It’s like giving your webpage a fresh, stylish look! I’ll show you how to do it step by step, even if you’re not super tech-savvy.

Enhance your webpage design by placing the Menu Module in a Theme Builder Template for a seamless and stylish user experience!

Placing the Menu Module in a Theme Builder Template

Create visual intrigue by positioning a menu module in a narrow column beside another module in a wider column, enhancing your webpage's design and functionality.

Enhance your webpage design by placing the Menu Module in a Theme Builder Template for a seamless and stylish user experience!

Add A Custom CSS Class To The Menu

To start off, we need to customize the menu module by adding a special CSS class. This ensures that the changes we make only affect this specific module on your site. Here’s how you do it: open the settings of your Divi Menu module, go to the Advanced tab, and look for the CSS IDs & Classes toggle. In the CSS Class input field, type “sidebar-menu” and you’re good to go! Let’s keep moving forward.

Customize the menu module by assigning a unique CSS class for exclusive targeted modifications to this specific module on your site.

Add A Custom CSS Class To The Menu

Add Some CSS To Adjust The Styling of The Divi Sidebar Menu

Now, let’s move on to the next step – adding some CSS code that does most of the work. This code is important because it hides the desktop menu and brings in the mobile menu, which is necessary because they’re quite different. We want to use the mobile menu to create the effect we’re looking for. The code also helps in adjusting the style of the menu.
A key part of the code sets a maximum height for the menu and allows for overflow. In simple terms, this means that as the menu’s content – like links and submenus – gets longer, the menu will show a scrollbar, letting you scroll through it. You can change or remove this if you want. The code also takes care of making the scrollbar look nice. Paste this code in your Divi>Theme Options>Custom CSS code box. Take a look at the labeled snippets, each providing a glimpse into its purpose.

/*<____________Code Starts Here___________>
/*hide desktop menu*/
.sidebar-menu .et_pb_menu__menu,
.sidebar-menu .mobile_menu_bar:before {
    display: none !important;
}
/*display mobile menu container on desktop*/
.sidebar-menu .et_mobile_nav_menu {
    display: block !important;
    width: 100%;
}
/*display mobile menu on desktop*/
.sidebar-menu .et_mobile_menu {
    display: block !important;
    position: relative;
    border-top: none;
}
/*hide point on top from prerequisite tutorial*/
.sidebar .et_mobile_menu:after{
  display: none;
}
/*hide bullet lists from menu*/
.sidebar-menu li {
    list-style: none;
}
/*style the menu, add overflow, set height*/
.sidebar-menu {
    max-height: 50vh !important;
    overflow-y: auto;
    border: 2px solid #000;
    box-shadow: none;
}
/*adjust the width of the entire scrollbar*/
.sidebar-menu::-webkit-scrollbar {
    width: 10px;
}
/*set a color for the scrollbar track*/
.sidebar-menu::-webkit-scrollbar-track {
    background: #ffffff;
}
/*style the scrollbar thumb*/
.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: #00d263;
    border-radius: 20px;
    border: 2px solid #ffffff;
}


/*<____________Code Ends Here___________>



Incorporate essential CSS code to seamlessly transition from the desktop menu to the mobile menu, ensuring a smooth and tailored user experience.

Add Some CSS To Adjust The Styling of Divi Sidebar Menu

Read More: Divi Logo Guide: Resize, Reset, and Style Like a Pro

Add Some JQuery To Collapse The Divi Menu Submenus

The goal here is to transform the dull, extended list of the Divi menu into a sleek and compact one. Achieving this involves incorporating some jQuery and CSS code. This not only condenses the mobile Divi menu submenu but also introduces stylish toggles. These toggles serve as visual cues, letting users know there’s more content to explore and indicating where to click. Our tutorial unfolds in two parts, each focusing on a specific type of code. Both parts work in harmony, and you’ll need both to make it all come together. Ready to enhance your mobile menu’s look and feel? Let’s dive into the details! Paste this code in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

Note: Please Click on the image above to copy the JQuery Code

Read More: What is Divi – Divi WordPress Theme & Visual Page Builder

Add Some CSS To Collapse The Divi Menu Submenus

The next step is to add the corresponding CSS code. This code works alongside the jQuery, and together they create the Divi mobile menu collapse effect. paste this code in your Divi>Theme Options>Custom CSS code box.

/*change hamburger icon to x when mobile menu is open*/


#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}




/*adjust the new toggle element which is added via jQuery*/


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
    width: 44px;
    height: 100%;
    padding: 0px !important;
    max-height: 44px;
    border: none;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    background-color: transparent;
}




/*some code to keep everything positioned properly*/


ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
    position: relative;
}




/*remove default background color from menu items that have children*/


.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
    background-color: transparent;
}




/*hide the submenu by default*/


ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important;
    visibility: hidden !important;
}




/*show the submenu when toggled open*/


ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
}




/*adjust the toggle icon position and transparency*/


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    text-align: center;
    opacity: 1;
}




/*submenu toggle icon when closed*/


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
    top: 10px;
    position: relative;
    font-family: "ETModules";
    content: '\33';
    color: #00d263;
    background: #f0f3f6;
    border-radius: 50%;
    padding: 3px;
}




/*submenu toggle icon when open*/


ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
    content: '\32';
}




/*add a point on top of the menu submenu dropdown*/


.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
    position: absolute;
    right: 5%;
    margin-left: -20px;
    top: -14px;
    width: 0;
    height: 0;
    content: '';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
}




/*adjust the position of the hamburger menu*/


.mobile_menu_bar {
    position: relative;
    display: block;
    bottom: 10px;
    line-height: 0;
}




/*force the background color and add a rounded border*/


.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
    background-color: #ffffff!important;
    border-radius: 10px;
}

Final Look

Creating a fixed and collapsible Divi sidebar menu, mastering the art of enhancing website design with the Divi Theme Builder.

Final Look of the Divi Sidebar Menu

Final Thoughts:

In wrapping up our journey on creating a fixed and collapsible Divi sidebar menu, you’ve learned how to elevate your website design using the Divi Theme Builder. Tackling the challenge of integrating a stylish sidebar menu into your Theme Builder template, we navigated through the steps seamlessly.

By strategically placing the Menu module in a narrow column, we gave your webpage a fresh and stylish appearance. Even if you’re not tech-savvy, I broke down the process, making it easy for you to follow along.

Adding a custom CSS class to the menu was the first step, ensuring our modifications only affected this specific module. Adding CSS code later on was really important because it changed how the Divi sidebar menu looks. Noteworthy features like a scrollbar with a customizable appearance were seamlessly integrated.

Next, we delved into the world of jQuery and CSS to achieve the transformation of the Divi mobile menu into a sleek and compact version. The addition of stylish toggles provided visual cues to users, indicating the presence of more content and where to explore further.

As a finishing touch, we applied CSS to collapse the Divi menu submenus, enhancing the overall user experience. The code snippets provided in this tutorial work together harmoniously, ensuring a cohesive and effective implementation.

So, with your newfound knowledge and a creatively enhanced menu, you’re well-equipped to take your website design to the next level. Embrace these techniques and witness the transformation of your Divi sidebar menu in action. Happy designing!

Read More: Is Divi Good for SEO: Myths, Realities, and Best Practices

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares