title: Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
body: <p>I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
  Here's the code (it's pretty messy):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openNav() {
      document.getElementById("myFilterTab").style.height = "100px";
  }
  
  function closeNav() {
      document.getElementById("myFilterTab").style.height = "0%";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   margin:0;
   background-color: white;  
   color: #a5a5af;
   font: 12px/1.4em Arial,sans-serif;
  }
  
  #header {
   position: relative;
   background-color: #77c9d4;
   color: #FFF;
      height: 11.3%;
  }
  
  
  #header input{
   position:absolute;
   top: 20px;
   padding: 5px 9px;
      height: 30px;
      margin-left: 700px;
      width: 600px;
      border: 1px solid #a4c3ca;
      background: #FFFFFF;
      border-radius: 6px 0px 0px 6px;
  }
  .SearchBar{
      color:black;
  }
  .SearchBar:focus{
      outline:0;
      color:black;
  }
  .SearchButton{
   position:absolute;
      padding:6px 15px;
      left:1300px;
   bottom:64px;
      border: 1px solid #57BC90;
      background-color:#57BC90;
      color:#fafafa;
   border-radius: 0px 6px 6px 0px;
  }
  .SearchButton:active{
      outline:0;
  }
  .SearchButton:hover{
   background-color:#015249; 
      border-color: #015249;
  }
  #logo {
   font-size: 30px;  
   line-height: 40px;    
   padding: 15px;
      color:white;
  }
  ul {
      position:relative;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #57BC90;
  }
  
  li {
      border-right:1px solid #57BC90;
      float:left;
  }
  #NavBar{
      width:455.76px;
  }
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  .Login{
      float:right;
      text-decoration: none;
  }
  li a:hover{
      color:white;
      text-decoration:none;
  }
  
  li a:hover:not(.active) {
      background-color: #015249;
  }
  .active {
      background-color: #015249;
  }
  br.clearLeft {
   clear: left;        
  }​
  * {
      margin: 0;
  }
  .glyphicon-log-in{
      right: 4px !important;
  }
  .openBox{
      position:absolute;
      width: 50px;
      background-color: #57BC90;
      top: -24px;
      left:926px;
      cursor:pointer;
  }
  .glyphicon-chevron-right{
      transform: rotate(-90deg);
      font-size:20px;
      color:white;
      right: -13px;
      top: 3px;
  }
  .glyphicon-remove{
      position:absolute;
      left: 1865px;
      top: 13px;
      font-size:20px;
      color:white;
  }
  html, body {
      height: 100%;
  }
  .wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  }
  .footer, .push {
      height: 142px; /* .push must be the same height as .footer */
   
  }
  .footer{
   background-color:#77c9d4;
  }
  .ShowBox{
      padding:1px;
      border: 1px solid gray;
      height:108px;
      width: 192px;
  }
  .FilterTab{
      transition: 0.5s;
      position: fixed;
      height: 100px;
      width: 100%;
      padding: 1px;
      background-color: #57BC90;
      bottom: 0px;
      border-radius: 20px 20px 0px 0px;
  }
  @media screen and (max-height: 450px) {
    .FilterTab {padding-top: 15px;}
    .FilterTab a {font-size: 18px;}
  }
  
  /*
  
  Sticky Footer by Ryan Fait
  http://ryanfait.com/
  
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;PC Master&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="ScrollBar.css"&gt;
  &lt;link rel="stylesheet" type="text/javascript" href="ScrollBar.js"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="header"&gt;
          &lt;div id="logo"&gt;PC Master&lt;/div&gt;
    &lt;form method="get"&gt;
    &lt;input class="SearchBar" type="text" name="search" placeholder="Cauta.." required&gt;
    &lt;button type="submit" Value="submit" class="SearchButton"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/form&gt;
     
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="home.html" id="NavBar"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Componente.html" class="active" id="NavBar"&gt;Componente&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Periferice.html" id="NavBar"&gt;Periferice&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="Contact.html" id="NavBar"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="Login"&gt;&lt;a href=""&gt;&lt;span class="glyphicon glyphicon-log-in" &gt;&lt;/span&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;    
                  &lt;br class="clearLeft" /&gt;
      &lt;/div&gt;
              &lt;div class="FilterTab" id="myFilterTab"&gt;
          &lt;a href="javascript:void(0)" class="closebtn" onclick='closeNav()'&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;div class="openBox"&gt;&lt;span class="glyphicon glyphicon-chevron-right" onclick='openNav()'&gt;&lt;/span&gt;&lt;/div&gt;
          
      &lt;/div&gt;
      
   &lt;div class='wrapper'&gt;
     
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          &lt;div class="ShowBox"&gt;
          &lt;/div&gt;
          
      &lt;div class='push'&gt;&lt;/div&gt;
          
  &lt;/div&gt;
       
  &lt;div class='footer' id="logo"&gt;PC Master&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The site is only for full hd monitor so in smaller monitors it won't look ok.</p>