(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Custom Off-Canvas with Elementor Free – No Extra Plugins
Create custom off-canvas in any direction – left, right, top, bottom with this simple code. No extra plugins are needed and off-canvas is fully customizable with any elementor widgets.
Version 1 – Off-canvas only closes when clicked on X icon
- dm-off-canvas is the CSS class of the whole off-canvas container.
- dm-toggle is the CSS class of any element that should open Off-canvas.
- dm-toggle-close is the CSS class of any element, in this case X icon, that should close Off-canvas.
- To change the position/direction of off-canvas, simply change the top,bottom,left,right values in CSS – .dm-off-canvas & .dm-off-canvas.open
- Below are values for each direction, First 2 values in .dm-off-canvas & 3rd value in .dm-off-canvas.open
– LEFT : left:-100%, top:0 & left:0%;
– RIGHT : Use same value as below code
– TOP : top:-100%, left:0% & top:0%;
– BOTTOM : bottom:-100%, left:0% & bottom:0%;
For TOP & BOTTOM, make sure to make the off-canvas container 100% width if needed. - I have removed the default scrollbar that would appear on off-canvas if it is bigger than screen, you can customize it to your requirements.
Want More Templates?
Just check my product pages, blogs and youtube tutorials for more content, both free and paid.
Want More Templates?
Just check my product pages, blogs and youtube tutorials for more content, both free and paid.
<style>
.dm-off-canvas {
transition: right 0.5s ease-in-out;
position: fixed;
right:-100%;
top:0;
overflow-y:scroll;
max-height: 100vh;
-webkit-overflow-scrolling: touch;
}
.dm-off-canvas.open {
right:0%;
}
/* Customize scrollbar */
.dm-off-canvas::-webkit-scrollbar {
width: 0px; /* Width of the scrollbar */
}
.dm-toggle, .dm-toggle-close {
cursor:pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const openButton = document.querySelector('.dm-toggle');
const closeButton = document.querySelector('.dm-toggle-close');
const offCanvas = document.querySelector('.dm-off-canvas');
openButton.addEventListener('click', function() {
offCanvas.classList.add('open');
});
closeButton.addEventListener('click', function() {
offCanvas.classList.remove('open');
});
});
</script>
Version 2 – Off-canvas closes if clicked on X icon or clicked outside Off-canvas
- dm-off-canvas-full is the CSS class of the whole off-canvas container.
- dm-toggle-full is the CSS class of any element that should open Off-canvas.
- dm-toggle-full-close is the CSS class of any element, in this case X icon, that should close Off-canvas.
- dm-off-canvas-bg is the CSS class of the container behind off-canvas that is full screen size
- To change the position/direction of off-canvas, simply change the top,bottom,left,right values in CSS – .dm-off-canvas-full & .dm-off-canvas-full.open
- Below are values for each direction, First 2 values in .dm-off-canvas-full & 3rd value in .dm-off-canvas-full.open
– LEFT : left:-100%, top:0 & left:0%;
– RIGHT : Use same value as below code
– TOP : top:-100%, left:0% & top:0%;
– BOTTOM : bottom:-100%, left:0% & bottom:0%;
For TOP & BOTTOM, make sure to make the off-canvas container 100% width if needed. - I have removed the default scrollbar that would appear on off-canvas if it is bigger than screen, you can customize it to your requirements.
<style>
.dm-off-canvas-full {
transition: right 0.5s ease-in-out;
position: fixed;
right:-100%;
top:0%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
max-height: 100vh;
}
.dm-off-canvas-full.open {
right:0%;
}
.dm-off-canvas-bg {
transition: opacity 0.5s;
position: fixed;
right:0%;
top:0;
opacity: 0;
pointer-events: none;
}
.dm-off-canvas-bg.visible {
opacity: 0.5;
pointer-events: auto;
}
/* Customize scrollbar */
.dm-off-canvas-full::-webkit-scrollbar {
width: 0px; /* Width of the scrollbar */
}
.dm-toggle-full, .dm-toggle-full-close {
cursor:pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const openButtonFull = document.querySelector('.dm-toggle-full');
const closeButtonFull = document.querySelector('.dm-toggle-full-close');
const offCanvasFull = document.querySelector('.dm-off-canvas-full');
const offCanvasBg = document.querySelector('.dm-off-canvas-bg');
openButtonFull.addEventListener('click', function() {
offCanvasFull.classList.add('open');
offCanvasBg.classList.add('visible');
});
closeButtonFull.addEventListener('click', function() {
offCanvasFull.classList.remove('open');
offCanvasBg.classList.remove('visible');
});
offCanvasBg.addEventListener('click', function() {
offCanvasFull.classList.remove('open');
offCanvasBg.classList.remove('visible');
});
});
</script>
