Source: https://divicake.com/blog/how-to-make-a-divi-sidebar-menu/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How To Make A Divi Sidebar Menu By Divi Cake·31 December 2023·Updated 24 March 2024·4 min read Learn to add a stylish fixed and collapsible sidebar menu to your Divi Theme Builder layout in this quick tutorial. We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Placing the Menu Module in a Theme Builder Template](https://divicake.com#placing-the-menu-module-in-a-theme-builder-template) - [Add A Custom CSS Class To The Menu](https://divicake.com#add-a-custom-css-class-to-the-menu) - [Add Some CSS To Adjust The Styling of The Divi Sidebar Menu](https://divicake.com#add-some-css-to-adjust-the-styling-of-the-divi-sidebar-menu) - [Add Some JQuery To Collapse The Divi Menu Submenus](https://divicake.com#add-some-jquery-to-collapse-the-divi-menu-submenus) - [Add Some CSS To Collapse The Divi Menu Submenus](https://divicake.com#add-some-css-to-collapse-the-divi-menu-submenus) - [Final Thoughts:](https://divicake.com#final-thoughts) Ever faced the challenge of designing a captivating layout with the [Div](https://divicake.com/go/divi/)i 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](https://divicake.com/blog/divi-theme-builder-overview/) 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](https://divicake.com/blog/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-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](https://divicake.com/blog/how-to-add-custom-css-to-divi/) 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](https://divicake.com/blog/divi-menu-styles/) 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. [Copy the code from here](https://drive.google.com/file/d/1o6z3T14YY8jes5YOLNwgPO5OblMoByZa/view?usp=drive_link) Read More: [Divi Logo Guide: Resize, Reset, and Style Like a Pro](https://divicake.com/blog/divi-logo-guide-resize-reset-and-style-like-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. [](https://drive.google.com/file/d/11ZwqegRGDJOJP_myLf6BO2Ks2Ld1RwEs/view?usp=sharing) Note: Please Click on the image above to copy the JQuery Code Read More: [What is Divi – Divi WordPress Theme & Visual Page Builder](https://divicake.com/blog/what-is-divi-wordpress/) ## 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. [Copy the code from here](https://drive.google.com/file/d/1c7Kub5N0_oIvbvznZq12Q0bdVQwaE3H1/view?usp=sharing) ## 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](https://divicake.com/blog/divi-enhancement-guide/) 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](https://divicake.com/blog/is-divi-good-for-seo/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)