Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows:
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Hire Me</a>
</div>
<div id = "main">
<span style="font-size:50px;cursor:pointer" onclick="openNav()" id="btnMenu">☰</span>
<div class = "centerElement">
</div>
</div>
I suspect that the issue lies with the centerElement class preventing its content from being pushed. In that case, modifications will be necessary for btnMenu as well.
CSS Styles:
.centerElement {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
margin: -300px 0 0 -300px;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
#btnMenu {
position: absolute;
top: 72px;
right: 128px;
font-size: 18px;
}
Javascript Functions:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
I also created an initial fiddle but encountered difficulties with the navbar not opening. While I did not pursue debugging further, you can access it here.