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

问题

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

i can see it!

and this is how I would like to show it:

Correct

回答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/

回答2:

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

回答3:

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

回答4:

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>

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

回答6:

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

来源：https://stackoverflow.com/questions/28879905/bootstrap-css-how-to-make-always-visible-navbar-toggle

标签

html

css

twitter-bootstrap