For a while now, I've been attempting to achieve three specific things with a Hamburger menu, but so far, I've had no luck. This Hamburger menu is responsive, transitioning into an X symbol upon clicking and moving to the right of the page with a smooth transition (although the shortened code doesn't work properly in the Fiddle).
1) My first goal is to vertically center the Hamburger menu within the Nav Bar, with the Menu text positioned next to it, while also ensuring that the text is vertically centered (appearing halfway up the Hamburger). I can manage to vertically center the Hamburger menu, but as soon as I add text, it always aligns with the bottom of the Hamburger lines.
2) Additionally, I'd like to have a border around the entire Hamburger itself, including padding, and then have the text beside it, outside of this border. Despite my efforts, the border seems to only wrap around the actual Hamburger lines, or the entire Hamburger without any padding.
3) Lastly, I'm looking for a way to change the color of both the Hamburger and the text upon hover and click events. So far, I've only managed to change the color of the text but not the Hamburger itself. I've searched high and low but haven't found a solution that works.
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;
}
.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;
}
#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>