I'm using the same code in my website. Is there any way open the nav bar and overlap on right, without pushing content to right? https://codepen.io/dalisc/pen/qzRGxQ
I experimented with position and z-index, but didn't help. Thank you
<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
<div class="navContent">
<a href="#">YOUR DASHBOARD</a><br>
<a href="#">MESSAGE CENTER</a><br>
<a href="#">IMPACT & OUTCOMES</a><br>
<a href="#">LEARNERS</a><br>
<a href="#">PROGRAMS</a>
<a href="#">SETTINGS</a>
</div>
</div>
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #181633;
transition: 0.5s;
padding-top: 120px;
white-space: nowrap;
overflow-x: hidden;
}
.sidebar a {
padding: 3px 8px 3px 32px;
text-decoration: none;
font-size: 16px;
color: #D3D2E4;
display: block;
}
set document.getElementById("mySidebar").style.width = "85px"; instead of document.getElementById("mySidebar").style.width = "250px";
var mini = true;
function toggleSidebar() {
if (mini) {
//console.log("opening sidebar");
document.getElementById("mySidebar").style.width = "250px";
/*change this line*/
document.getElementById("main").style.marginLeft = "85px";
/*change this line*/
this.mini = false;
} else {
//console.log("closing sidebar");
document.getElementById("mySidebar").style.width = "85px";
document.getElementById("main").style.marginLeft = "85px";
this.mini = true;
}
}body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidebar a:hover {
color: #f1f1f1;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
<a href="#"><span><i class="material-icons">info</i><span class="icon-text">about</span></a><br>
<a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>services</a></span>
</a><br>
<a href="#"><i class="material-icons">monetization_on</i><span class="icon-text"></span>clients</span></a><br>
<a href="#"><i class="material-icons">email</i><span class="icon-text"></span>contact<span></a>
</div>
<div id="main">
<h2>Open/Collapse Sidebar on Hover</h2>
<p>Hover over any part of the sidebar to open the it.</p>
<p>To close the sidebar, move your mouse out of the sidebar.</p>
</div>codepen here