I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and html
.navbar-toggle-always{
.navbar-toggle;
@media (min-width: 768px){
display: block!important;
}
.zero-margins;
}
html
<div class="pull-left ">
<button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add
@media (min-width: 768px){
display: block!important;
background-color:pink;
}
i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it
and this is how I would like to show it:
For navbars that never collapse, add the . navbar-expand class on the navbar. For navbars that always collapse, don't add any .
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
After some tests I managed to obtain the desired results:
here's the less code:
.navbar-inverse {
.navbar-toggle-always {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar-always {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
}
.navbar-toggle-always{
.navbar-toggle;
@media (min-width: 768px){
display: block!important;
background-color: transparent;
border:1px solid #333333;
}
.zero-margins;
.icon-bar-always {
.icon-bar;
border:1px solid #fff;
display: block;
border-radius: 1px;
}
.icon-bar-always + .icon-bar-always {
margin-top: 4px;
}
}
make sure you have at least 768px on the bottom right panel to see it:
http://jsfiddle.net/vyzwfovr/
I'm not sure if you want to add another one or is it enough to change the existing one. I case, you want to change the existing one, on a default/clean bootstrap install, this show do it:
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With