title: Opening and closing sidenav menu and issues with navbar
body: <p>I have run in to a couple issues here. I am trying to have a locked top bar, which does work. However even though I have placed some items like the orange animated button, it appears on the bar before the text links. Secondly. I am hopeful it's possible to use the animated button as a means to also close the pop out menu from the right side of the page. Sorry if this is something really simple I'm missing here. I am still learning this stuff.</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 myFunction(x) {
      x.classList.toggle("change");
      }
   
      function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      }
  
      function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
      font-family: "Lato", sans-serif;
      }
  
      .sidenav {
       height: 100%;
       width: 0;
       position: fixed;
       z-index: 1;
       top: 0;
       right: 0;
       background-color: #111;
       overflow-x: hidden;
       transition: 0.5s;
       padding-top: 60px;
       }
  
       .sidenav a {
       padding: 8px 8px 8px 32px;
       text-decoration: none;
       font-size: 25px;
       color: #818181;
       display: block;
       transition: 0.3s;
       }
  
       .sidenav a:hover, .offcanvas a:focus{
       color: #f1f1f1;
       }
  
       .sidenav .closebtn {
       position: absolute;
       top: 0;
       right: 25px;
       font-size: 36px;
       margin-left: 50px;
       }
  
      @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
       }
       
       
      .navbar {
      overflow: hidden;
      background-color: #577CC1;
      position: fixed;
      top: 0;
      width: 100%;
      }
  
      .navbar a {
      float: right;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 10px 10px;
      text-decoration: none;
      font-size: 17px;
      }
  
      body {
      margin:0;
      background-color: #ec7c23;
   font-color: ;
   font-size: 10pt;
   font-family: arial;
      height: 1000;
   
      }
  
      p, td, th {
   font-size: 10pt;
   font-family: arial;
      }
  
      form {
      margin: 0px;
      padding: 0px;
      }
  
      .main {
      padding: 10px;
      margin-top: 30px;
      }
  
  
  
       /*animated button*/
       .container {
       display: inline-block;
       cursor: pointer;
       }
  
      .bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #ec7c23;
      margin: 6px 0;
      transition: 0.4s;
      }
  
      .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
      transform: rotate(-45deg) translate(-9px, 6px) ;
      }
  
      .change .bar2 {opacity: 0;}
  
      .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
      transform: rotate(45deg) translate(-8px, -8px) ;
      }
      /*END animated button*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;
    &lt;/a&gt;
    &lt;a href="#"&gt;About&lt;/a&gt;
    &lt;a href="#"&gt;Services&lt;/a&gt;
    &lt;a href="#"&gt;Clients&lt;/a&gt;
    &lt;a href="#"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar"&gt;
    &lt;font size=20 color=white&gt;&amp;nbsp;
      &lt;b&gt;Website&lt;/b&gt;
    &lt;/font&gt;
  
  
    &lt;a href="#link"&gt;Link&lt;/a&gt;
    &lt;a href="#Link2"&gt;Another Link&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
  
    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()" &gt;
      &lt;div class="container" onclick="myFunction(this)"  &gt;
        &lt;div class="bar1"&gt;&lt;/div&gt;
        &lt;div class="bar2"&gt;&lt;/div&gt;
        &lt;div class="bar3"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>