CODEWITHSUNDEEP
jqueryhtmlcss
S. Hiltbrand
S. Hiltbrand

Reputation: 28

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

Upvotes: 1

Views: 31

Answers (1)

Jones Joseph
Jones Joseph

Reputation: 4938

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>

Upvotes: 1

Related Questions