title: How do I make my vertical navbar's text stay at the same place when it opens?
body: <p>So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar. I would like it to stay still while the navbar opens.
  Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !</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("mySidenav").style.width = "250px"; 
  }
  
  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .nav div {
    height: 4px; /*4px*/
    background-color: white;
    margin : 5px 0;/*5px 0*/
    border-radius: 25px;
    transition: 0.3s;
   }
  
   .nav {
    width: 30px;/*30px*/
    display: block;
    margin : 1em 0 0 1em;
  
   }
  
   .one {
    width: 30px;/*30px*/
   }
  
   .two {
    width: 25px;/*25px*/
   }
  
   .three {
    width: 20px;/*20px*/
   }
  
   .nav:hover div{
    width: 30px;/*30px*/
   }
  
  
   .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 0px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition : 0.1s;/*0.3s*/
  }
  
  .sidenav a:hover {
    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;}
  }
  
  .dropdown-toggle::after {
   position: relative;
   left: 36%;
  }
  
  .dropdown-menu {
  border: 0;
  border-radius: 0;
  }
  
  ul {
  
  padding: 8px 0px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
  padding-left: 0px;
  left: 0px;
  margin-left: 0px;
  }
  
  .mainNav li:hover ul{
    display: block;
  }
  
  .scroll {
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;&lt;/title&gt;
   &lt;/head&gt;
  
      &lt;body style="background-color: white;"&gt;
  
  
  
  
  &lt;!-- Code du Navbar vertical --&gt;
  &lt;div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" &gt;
   &lt;a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false"&gt;
    &lt;div class="one" style="background-color: black;" draggable ="false"&gt;&lt;/div&gt;
    &lt;div class="two" style="background-color: black;" draggable ="false"&gt;&lt;/div&gt;
    &lt;div class="three" style="background-color: black;" draggable ="false"&gt;&lt;/div&gt;
   &lt;/a&gt;
  
    
   &lt;div id="mySidenav" class="sidenav" style="z-index: 3;"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  
    &lt;ul class = "mainNav"&gt;
    &lt;li&gt;&lt;a href="#active" draggable ="false"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;div &gt;
    &lt;li&gt;&lt;a href="#" draggable ="false"&gt;Catalog&lt;/a&gt;
  
        &lt;div class="scroll"&gt;
          &lt;div class ="tops"&gt;
        &lt;ul&gt;&lt;a  href="#" style="font-size: 20px" draggable ="false"&gt;Tops&lt;/a&gt;
  
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Tees + Tanks&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Graphic Tees&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Shirts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Polos&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Hoodies + Sweatshirts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Sweaters + Cardigans&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="bottoms"&gt;
        &lt;ul&gt;&lt;a  href="#" style="font-size: 20px" draggable ="false"&gt;Bottoms&lt;/a&gt;
  
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Jeans&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Shorts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Pants&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Joggers&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Overrall&lt;/a&gt;&lt;/li&gt;
  
  
        &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="S&amp;A"&gt;
        &lt;ul&gt;&lt;a  href="#" style="font-size: 20px" draggable ="false"&gt;Shoes and accessories&lt;/a&gt;
  
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Shoes&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Sunglasses &amp; Readers&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Jewelry&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Watches&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Socks &amp; Underwear&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Hats &amp; Beanies&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" style="font-size: 14px" draggable ="false"&gt;Bags &amp; Backpacks&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
          &lt;/div&gt;
  
  
        &lt;ul&gt;&lt;a  href="#" style="font-size: 20px" draggable ="false"&gt;Sales&lt;/a&gt;&lt;/ul&gt;
  
  
  
  
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;/div&gt;
    &lt;li&gt;&lt;a href="#" draggable ="false"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" draggable ="false"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>