(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.)
Required for Custom CSS.
1 – Elementor Pro
Remove the extra space below icons that Elementor adds by default
.floating-bar-dm : Add this CSS class to the container that contains all the icons OR add it to the individual icons that needs the space removed.
.floating-bar-dm .elementor-icon {
margin-bottom: -5px;
}
Javascript used for Toggle Button to work
floatingBar.style.transform = ‘translateX(-150px)’; Change the translateX value to your desired value for each different device, make sure you do it in both location.
.dm-floating-toggle : is the CSS class of the toggle button which on click runs the below javascript
.dm-floating-bar-container : is the CSS class of the whole container that contains the toggle button and floating bar
<style>
/*Rotates Toggle text 90deg*/
.dm-vertical-text {
max-width: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.querySelector('.dm-floating-toggle');
const floatingBar = document.querySelector('.dm-floating-bar-container');
let isBarVisible = false;
toggleButton.addEventListener('click', function () {
if (!isBarVisible) {
// Adjust translate values based on screen width
if (window.innerWidth >= 1024) {
// Desktop
floatingBar.style.transform = 'translateX(-150px)';
} else if (window.innerWidth >= 768) {
// Tablet
floatingBar.style.transform = 'translateX(-150px)';
} else {
// Mobile
floatingBar.style.transform = 'translateX(-150px)';
}
isBarVisible = true;
} else {
// Reset translation for all devices
floatingBar.style.transform = 'translateX(0)';
isBarVisible = false;
}
});
// Adjust translation on window resize
window.addEventListener('resize', function () {
if (isBarVisible) {
if (window.innerWidth >= 1024) {
floatingBar.style.transform = 'translateX(-150px)';
} else if (window.innerWidth >= 768) {
floatingBar.style.transform = 'translateX(-150px)';
} else {
floatingBar.style.transform = 'translateX(-150px)';
}
}
});
});
</script>
