I've been working on creating a responsive layout button that resembles the following design:
https://i.sstatic.net/v5vDd.png
However, I've encountered an issue where I can't seem to generate all three horizontal lines, only one of them. This is how it currently looks:
https://i.sstatic.net/p21vc.png
This is my code:
HTML
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
CSS
.navbar-toggler {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.navbar-toggler span {
height: 4px;
background: #545454;
transition: 0.2s all;
}
.navbar-toggler span:before, .navbar-toggler span:after {
content: "";
display: block;
}