S. Hiltbrand S. Hiltbrand - 1 month ago 6
jQuery Question

100% Width Side Navigation Panel Not Expanding

I'm creating a project that requires a 100% width navigation panel, I can't get it to expand. When I click on the hamburger button, nothing happens. I think it could be my

z-index
but, I tried to layer everything correctly but to no avail. So, does anybody know whats going on?



/* Navigation Panel */

.navigation-panel {
height: 100vh;
width: 0;
position: absolute;
display: block;
z-index: 1;
top: 0;
left: 0;
background: #901536;
overflow-x: hidden;
transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
text-align: right;
padding: 20px;
color: #fff;
}
.navigation-bar h3 {
float: left;
text-transform: uppercase;
}
.navigation-bar span {
font-size: 20px;
cursor: pointer;
}
/* Header Section */

.header {
height: 80vh;
background: #fff url(../img/bg.jpg);
background-size: cover;
text-align: center;
}

<!-- Navigation Panel -->
<div class="navigation-panel" id="sidenav">
<a href="javascript:void(0)" onClick="openNav()">&times;</a>
<a id="active">Home</a>
<a>Who We Are</a>
<a>Our Teams</a>
<a>Catch Us</a>
<a>Info</a>
</div>

<!-- Header -->
<div class="header">
<div class="navigation-bar">
<h3>Central Coast Crushers</h3>
<span onclick="closeNav()">&#9776;</span>
</div>
</div>

<!-- Scripts -->
<script>
function openNav() {
document.getElementById("sidenav").style.width = "100";
}

function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
</script>





enter image description here

Answer

Check the function you are calling... It should be openNav() in the header, not closeNav() and a percentage(%) symbol in the JS width assignment should do.

function openNav() {
  document.getElementById("sidenav").style.width = "100%";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
/* Navigation Panel */

body * {
  background-color: black;
}
.navigation-panel {
  height: 100vh;
  width: 0%;
  display: block;
  z-index: 1;
  top: 0;
  position: absolute;
  left: 0;
  background: #901536;
  overflow-x: hidden;
  transition: 0.5s;
}
/* Navigation Bar */

.navigation-bar {
  text-align: right;
  padding: 20px;
  color: #fff;
}
.navigation-bar h3 {
  float: left;
  text-transform: uppercase;
}
.navigation-bar span {
  font-size: 20px;
  cursor: pointer;
}
/* Header Section */

.header {
  height: 80vh;
  background: #fff url(../img/bg.jpg);
  background-size: cover;
  text-align: center;
}
<div class="navigation-panel" id="sidenav">
  <a href="javascript:void(0)" onClick="closeNav()">&times;</a>
  <a id="active">Home</a>
  <a>Who We Are</a>
  <a>Our Teams</a>
  <a>Catch Us</a>
  <a>Info</a>
</div>

<!-- Header -->
<div class="header">
  <div class="navigation-bar">
    <h3>Central Coast Crushers</h3>
    <span onclick="openNav()">&#9776;</span>
  </div>
</div>