I'm trying to use the default-toggler for bootstrap in a more traditional way, but I can't seem to understand why my custom changes are causing the button to initially load closed?
[Something like ' X ']
It's probably just a mistake due to my lack of experience with BS4, so I would really appreciate any advice anyone could provide.
Here is a complete demo JS Fiddle showcasing all my edits.
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="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button>
CSS
.navbar-toggler {
border: none;
background: transparent !important;
}
.navbar-toggler:focus {
outline: none;
background: transparent !important;
}
.navbar-toggler .icon-bar {
background-color: #fff;
transform: rotate(0deg) translate(0px, 0px);
transition: ease all .2s;
}
.navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggler .icon-bar + .icon-bar {
margin-top: 4px;
}
.icon-bar:nth-child(2) {
width: 16px;
transition: ease all .2s;
}
.navbar-toggler:hover > .icon-bar:nth-child(2){
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:active > .icon-bar:nth-child(2){
width: 22px;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
transform: rotate(45deg) translate(5px, 4px);
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transition: ease all .2s;
}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
transition: ease all .2s;
}
I would greatly appreciate any help or guidance on this issue. Thanks a lot in advance.
Sincerely, -B.