Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 463
sathia Avatar asked Mar 05 '15 14:03

sathia


People also ask

How do I stop my navbar from collapsing?

For navbars that never collapse, add the . navbar-expand class on the navbar. For navbars that always collapse, don't add any .

How do you make a navbar collapsible?

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".


2 Answers

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/

like image 90
sathia Avatar answered Sep 20 '22 08:09

sathia


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;
}
like image 22
Jo Smo Avatar answered Sep 21 '22 08:09

Jo Smo