How To Create A Divi Sidebar Menu Without A Plugin

Neil Forrester
January 1, 2022

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.

Download the Divi Sidebar Menu json zip file. Extract & save the file.

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.

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

The Importance Of Professional Website Design

The Importance Of Professional Website Design

You can try to design your company’s website yourself, but the fact is, it just won’t have the same kind of impact. Plus, designing a website can be really time-consuming – time which you’d probably be better off using to run the business and make sales. Professional...

Good Web Design Compliments Digital Marketing

Good Web Design Compliments Digital Marketing

Your website is the main platform your customers get to know about your business. After all, your digital marketing efforts will send prospects to your website – whether it is to find more information about your products/services, make a booking, buy a product or find...

Top Five Tips for a Healthy Work-Life Balance

Top Five Tips for a Healthy Work-Life Balance

Achieving work-life balance is an art that needs mastery, just like music, dance and painting. Work-life balance may seem like impossible to achieve, especially in the current circumstances. The world is not the same since the coronavirus pandemic broke in. Many...

Google Ads Agency Geelong

Google Ads Agency Geelong

Digital online advertising is a vital part of any online marketing strategy. Key among the advertising services available to marketers is Google Ads, which allows marketers to leverage Google’s insanely massive reach of about 5-billion searches per day. Here are some...

Do I Need Cyber Insurance?

Do I Need Cyber Insurance?

What is cyber protection? Cyber insurance is a relatively new form of cover. It’s designed to help protect your business from the financial impact of computer hacking or a data breach.If you see it, report it! In February 2017, the Senate passed the Privacy Amendment...

Pin It on Pinterest

Share This