Bootstrap css, how to make always visible navbar-toggle?

Question

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 cod

Answer 1

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/

Answer 2

Why not just add d-block class to toggler?

<button class="navbar-toggler d-block" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Answer 3

Add a custom class to your navbar-toggle, like navbar-toggle-visible and then add this rule to your css

  @media (min-width: 768px) {
  .navbar-toggle-visible {
    display: inline;
  }

Answer 4

In a normal bootstrap install, there is this line of css found in their generic css file:

.navbar-toggle { display:none; }

In order to get the button to always show, in your custom CSS you just need to add this line of code. If you have your stylesheet applied after theirs, it will overwrite it.

.navbar-toggle { display:block; } // the !important isn't necessary

Answer 5

The colors of the toggle and icon-bar are defined along with navbar-default as well as with navbar-inverse. So if you are trying to display them on a custom div, the colors are also removed along with the navbar-default/inverse color scheme.

Add this to your css:

.navbar-toggle {
    background-color: transparent;
}
.icon-bar {
    background-color:#333;
}

Answer 6

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