title: How to centre Hamburger CSS, centre text and add border
body: <p>I have been trying and trying to achieve 3 things with a Hamburger menu but to no avail. This is a responsive Hamburger that changes to a X on click and moves to the right of the page with transition (all of which works fine although with the shortened code wont in the Fiddle).</p>
  
  <p>1) I would like to vertically centre the Hamburger menu within the Nav Bar with Menu text at the side but also have this text vertically centred (so it appears halfway up the Hamburger). I can vertically centre the Hamburger menu okay but once I add text the text is always in line with the bottom of the Hamburger lines. </p>
  
  <p>2) In addition I would also like a border around the entire Hamburger itself, with padding, and then the text at the side outside of this. Whatever I try it just puts a border around the actual Hamburger lines or the entire Hamburger with no padding. </p>
  
  <p>3) Also is there a way to changes the colour of both the Hamburger and text on hover and click? The best I've achieved is changing the colour of the text but not the Hamburger. I have searched and searched but cannot find anything that works.</p>
  
  <p><a href="https://jsfiddle.net/usLvjp48/" rel="nofollow noreferrer"><strong>Fiddle</strong></a> </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>jQuery(document).ready(function () {
      jQuery('#toggle-nav').click(function (e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');
          jQuery('.hamburgerWrapper').toggleClass('active');
  
          e.preventDefault();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hamburgerWrapper {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    left: 0;
    position: absolute;
    width: 100%;
    background-color: #3462bc;
    border-bottom: 2px solid #b3c4e6;
    transition: all 600ms ease;
    /*padding-top: 5px;
          padding-bottom: 1px;*/
    /*border: 5px solid yellow;*/
  }
  .hamburgerWrapper.active {
    left: 60%;
    transition: all 300ms ease;
  }
  .hamburger {
    list-style-type: none;
  }
  .hamburger li a {
    text-align: center;
    display: block;
    color: #fff;
    padding: 24px 16px 12px 16px;
    cursor: pointer;
    /*border-bottom: 5px transparent;*/
  }
  #toggle-nav:after {
    padding-left: 50px;
    content: 'Menu';
  }
  #toggle-nav span,
  #toggle-nav span:before,
  #toggle-nav span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  #toggle-nav span:before {
    top: -10px;
  }
  #toggle-nav span:after {
    bottom: -10px;
  }
  #toggle-nav span,
  #toggle-nav span:before,
  #toggle-nav span:after {
    transition: all 500ms ease-in-out;
  }
  #toggle-nav.active span {
    background-color: transparent;
  }
  #toggle-nav.active span:before,
  #toggle-nav.active span:after {
    top: 0;
  }
  #toggle-nav.active span:before {
    transform: rotate(45deg);
  }
  #toggle-nav.active span:after {
    transform: rotate(-45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="hamburgerWrapper"&gt;
    &lt;ul class="hamburger"&gt;
      &lt;li&gt;&lt;a id="toggle-nav" href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>