Slide-in Sidebar Section in the Divi theme

Learn how to create Smooth Slide-in Sidebar Section with custom CSS and jQuery!

A sidebar section is a great and useful tool but it can also distract the user from the main content of your page. Especially when it takes a lot of the website’s space.

That’s why in this tutorial, I will show you how to use Divi Builder to create a slide-in sidebar that will show up only after you click on the button.

We are going to use the custom CSS and some jQuery code to achieve that. Watch my step-by-step walkthrough video and copy the code we used below!

If you’re our subscriber feel free to download the JSON file!

Download This Layout Live preview

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!

Can’t see the form? Click here

Step 1. Add a section in the Divi Builder

In the Advanced tab of the section setting, we need to change the position of the sidebar section to “Fixed”. We also need to include a custom CSS class. The CSS class used in the demo example is called dl-slide-sidebar.

The max-width of the section is set to 300px and if there is a lot of content, make sure to change the horizontal overflow value to “scroll” (in the Advanced tab of the section settings).

Step 2. Add the Close Button inside the Sidebar

To create an X close button we used the Blurb module added in the sidebar section. The module does not have a title, nor any content. We enabled the icon and changed the width, height, and the icon size to 50px. To make sure the sidebar section slides out upon clicking on the Blurb – we’ve added a custom CSS class of dl-close so that we can target this element in our JavaScript code.

Step 3. Add the Button trigger

We are using a standard Divi Button with a custom CSS class of dl-btn-toggle. The button text will be changed dynamically, but on the page load it is set to “Open”.

Add the CSS Styles!

Here is the CSS code we used to hide the sidebar only if not in the Visual Builder and to show it when it gets a new CSS class of is-opened. The “translateX” value needs to match the section width. The last bit adds a hand cursor to the Blurb module:

body:not(.et-fb) .dl-slide-sidebar {
  transform:translateX(300px);
}
body:not(.et-fb) .dl-slide-sidebar.is-opened {
  transform:translateX(0);
}
.dl-slide-sidebar.has-transition {
  transition:.7s;
}
.dl-close {
  cursor:pointer;
}

Finally, the jQuery magic!

This is the final jQuery code. To understand what it does – please watch the video 😉

jQuery(document).ready(function($) {
	var dl_ButtonToggle = $('.dl-btn-toggle');
  	var dl_SlideSidebar = $('.dl-slide-sidebar');
  	
  	function dl_SidebarCheck() {
      if (dl_ButtonToggle.hasClass('is-opened')) {
        dl_ButtonToggle.text('Close');
      }
      else {
        dl_ButtonToggle.text('Open');
      }
    }
  
  
  	dl_ButtonToggle.click(function(e) {
      e.preventDefault();
      dl_ButtonToggle.toggleClass('is-opened');
      dl_SlideSidebar.toggleClass('is-opened');
      dl_SlideSidebar.addClass('has-transition');
      dl_SidebarCheck();
    })
	
  	$('.dl-close').click(function() {
      $('.is-opened').removeClass('is-opened');
      dl_SidebarCheck();
    })
});

What do you think?

Feel free to use it on your website and do not hesitate to show us the final result! We are eager to see the effects of your work!

We always appreciate your feedback, so please share your opinion with us in the comments!

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Divi Lover Shop

28 Comments

Kyle on 2024-08-01 at 00:48

I’m happy that I found this, though I am curious if there’s a way to have the content width adjust based on the sidebar being opened or closed.
I was able to make some changes so that it shows open by default in a sidebar taking 15% of the page width, with the main content set to 85%
I am trying to find a way to make it so that when the section closes the main content fills up the whitespace.
Reply
Paweł on 2024-04-02 at 20:42

Aniu a czy da się wykonać przycisk aby zamiast przycisku z tekstem był moduł “Icon” np. ikonka hamburgera, a po kliknięciu zamienia się na ikonkę krzyżyka?
Reply
Rick Elrod on 2024-04-02 at 14:24

Could you tell me how to make the menu close when you click outside of it?
Reply
John on 2024-03-03 at 00:02

How would I alter the CSS to also hide it in the visual builder (since it overlays the content – and is a distraction) I would just use the widreframe mode to edit it.
Reply
- Ania Romańska on 2024-03-05 at 12:38
  
  You can remove the body:not(.et-fb) parent selector from the CSS (the sidebar will be moved outside of the viewport, the same as on the front-end).
  Reply

John on 2024-02-21 at 22:11

I’m trying to trigger this side menu from a main wordpress menu item, I add the css class “dl-btn-toggle” to the wordpress menu item css and it works on desktop but not on mobile…would the jquery code need to change to allow a touch/tap of a finger on to trigger it?

Ania Romańska on 2024-02-22 at 17:26

Hi John,

Yes, the jQuery code would need to be changed. I used the dl-menu-toggle CSS class for the menu item and this bit of code:

jQuery(document).ready(function($) {
		var dl_MenuToggle = $('.dl-menu-toggle a');
  	var dl_SlideSidebar = $('.dl-slide-sidebar');
  	
  	function dl_SidebarCheck() {
      if (dl_MenuToggle.hasClass('is-opened')) {
        dl_MenuToggle.text('Close');
      }
      else {
        dl_MenuToggle.text('Open');
      }
    }
  
  
  	dl_MenuToggle.off('touchend');
    $(document).on('touchend click', '.dl-menu-toggle a' , function(e){
      e.preventDefault();
      dl_MenuToggle.toggleClass('is-opened');
      dl_SlideSidebar.toggleClass('is-opened');
      dl_SlideSidebar.addClass('has-transition');
      dl_SidebarCheck();
    })
	
  	$('.dl-close').click(function() {
      $('.is-opened').removeClass('is-opened');
      dl_SidebarCheck();
    })
});

You can see this working here.

Kristine Schroeder on 2023-12-09 at 22:24

Ania, I’m just stuck. I was hoping to use an icon that looks like a hamburger menu to create a menu that’s not really a menu. I really wanted a slide-in menu – but I also wanted OTHER items on the header. And Divi didn’t really seem to be able to do that. For example, a logo on the left, a schedule button, 2 social shares, and then a hamburger menu that would push everything over to open a slide in.

If I could make it do it on hover, that would be cool, but clicking will work.

Unfortunately, I’m just getting lost. I used an icon module instead of a button. But I did everything else the way you did. It hides it – but when I click the icon, nothing happens. I changed all of the words that said button or btn in the code to icon, but it isn’t working.
Reply
Charles on 2023-08-13 at 01:45

Hey Ania! What an amazing tutorial! One of the best I’ve seen : ) Everything seems to be working on my end.

But I would like to have multiple buttons on my webpage. Each button would open a *different* sidebar.

I have therefore given a a CSS class name to each button and sidebar. Like this:

dl-slide-sidebar-2
dl-btn-toggle-2

dl-slide-sidebar-3
dl-btn-toggle-3

etc.

How can I change both the CSS *and* Jquery codes to make it work for all my buttons and sidebars? Without having to repeat the whole code multiple times.

(I’m new to all of this)

Thank you for your help Ania! And congrats again on this wonderful tutorial : )
Reply
Richard Frongillo on 2023-04-05 at 23:46

Thanks for this tutorial! Excellent! My need is related to this slider and I have gotten close based on your ideas. Perhaps you can give guidance to my slight differences: slider has images next to text; want to show slider on page load; when scrolling down, want to shrink slider to just show images until hover (when we expand again)…. This page is a model: https://www.allegramarketingprint.com/locations/franklin-ma-downtown
Reply
David on 2023-02-28 at 11:14

Works great, thank you! I have built a menu with it. Maybe you can give me a hint:
How could i achieve to close that opened section by clicking somewhere outside?
Reply
Terry on 2023-01-30 at 03:10

Hi it looks great but using the theme builder for the header and footer the sidebar is cut off so you can’t close it at all. Is there a way to make it slide over the header and footer?
Thanks
Reply
- Ania Romańska on 2023-02-01 at 11:22
  Hi Terry!
  Please try adding this bit of CSS to make sure the Body template is on top of the Header and Footer templates:
  
  .et-l--post .et_builder_inner_content { z-index: 2; }
  
  Hopefully, this helps!
  Reply
Joel on 2022-05-13 at 17:38

Great tutorial! I would like to do exactly this, but I would like push the page to the main elements on the page to the left and resize the items (like you are making your browser window smaller). I hope I’m explaining that correctly.
Reply
- Joel on 2022-05-13 at 17:40
  
  For example, when you click on the Open button, the menu would come out and shift all of the page elements to the left.
  Reply
Stoan on 2021-12-29 at 10:07

Hi Ania

Love your work, thanks for this.
Do you think it would be possible to slide it out after a certain time using a conditional?
Say 5 seconds after the page has loaded it slides out, it’s much less intrusive than a popup.
For mobile it would probably need a different way.
Thanks
Reply
- Ania Romańska on 2022-01-03 at 08:20
  
  Thank you, Stoan 🙂
  You might want to look at this tutorial and combain the two methods together..
  Reply
Murray Russell on 2021-08-07 at 23:14

Hi Ania. Just downloaded and implemented the code from your freebie for which many thanks. It works so I can check where I went wrong.
Reply
Murray Russell on 2021-08-07 at 22:41

This is exactly what I want and your explanations are great however while having checked multiple times that I have followed you and have copied the code directly from this site, clicking the button gives
“Uncaught ReferenceError: dl_Buttontoggle is not defined
at dl_SidebarCheck ((index):111)”
Any assistance greatly appreciated thank you.
Reply
Abhinav on 2021-04-30 at 11:20

Ania please please please share how can we turn display: none before click and return to regular default display value using your code. Could you please share a snippet i can add to the above code.

Thanks a bunch in advance. hope you actually answer. Awaiting your reply.
Reply
- Abhinav bhalla on 2021-04-30 at 11:23
  
  what i mean to say is display: none; before any click or trigger and then return to default display value after click.
  
  Then we also need it to revert to display: none; when the close icon is clicked.
  
  Awaiting your reply.
  
  Your tuts is very good but then i find this to be the only caveat in your code.
  Reply
  - Ania Romańska on 2021-04-30 at 17:10
    
    I’m sorry, but I do not understand what it is you are trying to achieve. If you click the close icon, it closes the panel – not sure what do you mean by “need it to revert display:none”.
Jacob Eggebeen on 2021-04-15 at 20:59

How can we have the sidebar close if anywhere outside of it is clicked?
Reply
Ania on 2021-04-11 at 21:26

Hi! I would like to make Slide-in Sidebar Section fixed on the uper part of my page. I did it but I have issue when it opens because it covers my menu. Could you help me? What extra code I should use?
Reply
San on 2021-04-11 at 13:37

Hello i arrive to the jquerry, then i dont know how to continue.
Can you send me the download link?
Thanks
Reply
Jyoti on 2021-04-06 at 05:58

Hi,

How can I display hamburger icon instead of ‘Open’ and ‘Close’

Please help.

Thanks
Reply
Hurri on 2020-12-10 at 07:53

Ania, I love your tutorial style, its simple easy to follow and as always very useful!
Thank you so much for making the effort to give us these free snippets!
Reply
Aiman on 2020-12-10 at 04:59

Perfecto! i learn jQuery but since then i don’t know how to use in Divi. LOL

So i easily understand your step by step guide throughout this videos.
Reply