How to centre Hamburger CSS, centre text and add border

Question

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).

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.

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.

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.

Fiddle

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();
    });
});

.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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hamburgerWrapper">
  <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a>
    </li>
  </ul>
</div>

Answer 1

For 1, you can use vertical-align: middle; in combination with display: inline-block; for the menu text and the hamburger icon. You are positioning the 2 additional bars of the hamburger menu with absolute positioned elements, so you need to position the hamburger icon either absolute or relative. If you are using the vertical-alignment, you need to use position: relative. However, you could also use box-shadow for creating a hamburger menu (see 2)

.element {
  width: 100px;
  height: 50px;
  background: green;
  display: inline-block;
  vertical-align: middle;
}
.menu {
  display: inline-block;
  vertical-align: middle;
}

<div class="element"></div>
<div class="menu">Menu</div>

Here it is applied onto your example:

.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;
  display: inline-block;
  vertical-align: middle;
  content: 'Menu';
}
#toggle-nav span,
#toggle-nav span:before,
#toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#toggle-nav span:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -10px;
}
#toggle-nav span:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  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);
}

<div class="hamburgerWrapper">
  <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a>
    </li>
  </ul>
</div>

---

For 2, you could just wrap the icon in a parent element with padding. Make sure, to include the padding-top and padding-bottom (necessary, because your icon has an actual size which is smaller than it appears)

I used here box-shadow instead of :before and :after:

.wrapper {
  padding: 8px 2px;
  border: 1px solid black;
  display: inline-block;
}
.element {
  background: black;
  width: 20px;
  height: 3px;
  box-shadow: 0 -5px 0 0 black, 0 5px 0 0 black;
}

<div class="wrapper">
  <div class="element"></div>
</div>

---

For 3, you're better off using JavaScript, because you obviously want to do more than just coloring the elements (i.e. you need some logic which shows a menu, etc.).

However, it's easy to create a hover effect with CSS. If you want to have a click effect, you need to either use :focus, which only works, when the element is focused, or you use :target, like it is descriped in this example.

Here you can see the hover effect:

.wrapper {
  transition: 0.5s ease all;
}
.wrapper:hover {
  background-color: #ccc;
}
.wrapper:hover .hamburger-wrapper {
  border-color: red;
}
.wrapper:hover .hamburger {
  background: green;
  box-shadow: 0 -5px 0 0 green, 0 5px 0 0 green;
}
.wrapper:hover .menu {
  background: yellow;
  color: orange;
}
.menu {
  transition: 0.3s ease all;
  display: inline-block;
  vertical-align: middle;
}
.hamburger-wrapper {
  transition: 0.3s ease all;
  padding: 8px 2px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}
.hamburger {
  transition: 0.3s ease all;
  background: black;
  width: 20px;
  height: 3px;
  box-shadow: 0 -5px 0 0 black, 0 5px 0 0 black;
}

<div class="wrapper">
  <div class="hamburger-wrapper">
    <div class="hamburger"></div>
  </div>
  <div class="menu">Menu</div>
</div>