How To Create A Divi Sidebar Menu Without A Plugin

In this tutorial I’ll show you how to create a slide out sidebar menu for Divi without using a plugin. That said, I can’t take any credit for this tutorial. All I have simply used original Divi Sidebar Menu tutorial by Jason Champagne which you can view here: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-sliding-push-sidebar-in-divi

You can view a live demo of this header sidebar / footer Divi Theme Builder template here: https://www.a1jnfplumbing.com.au/

What are the differences between my Divi sidebar menu and Jason’s?

• My sidebar menu does not push / squeeze the page. It appears over the top of the page.
• I have also removed the scroll bars. You may want to keep these if you have more menu items.
• I removed the fixed position settings from the sidebar Section and fixed the sidebar using custom CSS. I did this because fixing the position in the Section settings prevented my anchor link scrolling down to the contact form Section correctly.

Create a new page to test the menu.

• Create a new page. Call it Divi Sidebar Menu.
• Edit with Divi Builder and add a few rows and modules for example purposes.
• We will assign the new header and footer to this page only in the beginning, so it won’t affect your other pages.
• Once you’re happy with it we will make it global.

Import the Divi Sidebar Menu Theme Builder Template

• Go to Divi / Theme Builder
• Click the Import icon top right.
• Select the json file.
• Uncheck Override the Default Website Template and Allow import to override existing assignments.
• Click Import.

The header and footer template will be imported. The title will be in red because it hasn’t been assigned to anything.

• Click the cog icon and assign the template to Specific Pages / Divi Sidebar Menu page.
• Click Save Changes.

View your page to ensure all is okay.

Editing the Divi Sidebar Menu Header

• In Theme Builder, edit the header.
• View the design in wireframe mode.

Points to note

• The header Section contains the top bar, logo, text and buttons.
• The Sidebar Menu Section contains the sidebar.
• The code module contains the code which makes it work as written by Jason Champagne.

The Divi Sidebar Menu Section is fixed in place with custom CSS.
Edit Section / Advanced Tab / Main Element.

The Content Row has had the scroll bars remove with custom CSS.
Edit Content Row / Advanced Tab / Main Element.

Editing the Divi Sidebar Menu Footer

Edit the footer elements.

Points to note.

The Section containing the form has the ID contactform. The enquiry buttons link to this Section ID.

Apply your changes to the template header and footer as required. Save and view.

If you’re happy with the design and want to apply it globally, drag the header and footer over to the global template.

Hiding the sidebar menu when editing Divi Pages

Note: When editing a page using Divi Builder, the sidebar overlaps the page layout. To hide the header & sidebar while you make edits to a Divi page do the following.

• Click the page settings cog.
• Select Advanced tab / Custom CSS.
• Add the following code: header{display:none;}
• Save.

Don’t forget to remove the code when you’re done.