insert image description here I am currently working on implementing a hamburger slide-out feature in my navigation bar. The desired behavior is for the sidebar to slide out to the right. We are using Elementor within WordPress for this project. Has anyone successfully accomplished this task before? I have been struggling to find a solution that keeps the sidebar sticky once it slides out.
This is the code snippet I intend to use:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function openNav() {
document.getElementById('mySidenav').style.width = '250px';
}
function closeNav() {
document.getElementById('mySidenav').style.width = '0';
}
</script>
<style>
body {
font-family: "Lato", sans-serif;
}
.elementor-menu-toggle {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #f1f4ee;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.elementor-menu-toggle a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.elementor-menu-toggle a:hover {
color: #000000;
}
.elementor-menu-toggle .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="elementor-menu-toggle">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">xxxxxx</a>
<a href="#">xxxxxx</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</body>
</html>
Upon inspecting the console output, this is the CSS class being returned:
.elementor-84 .elementor-element.elementor-element-461994e > .elementor-widget-container {
margin: 0px 0px 0px 0px;
}
.elementor-widget-nav-menu .elementor-widget-container {
display: flex;
flex-direction: column;
}
.ob-has-background-overlay > .elementor-widget-container {
position: relative;
}
.elementor-element .elementor-widget-container {
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.elementor *, .elementor :after, .elementor :before {
box-sizing: border-box;
I require assistance in identifying the appropriate class to utilize or if there is something missing from the setup. I attempted to tweak the CSS through the advanced widget options for the navigation bar but did not achieve the desired stickiness even after updating.