CODEWITHSUNDEEP
csstwitter-bootstrap-3navbar
Vivek Kumar
Vivek Kumar

Reputation: 174

Keep Bootstrap 3.3.x navbar collapsed at all viewport sizes

Is there any way to increase to ensure that bootstrap 3 navbar never collapses so that the desktop version looks similar to the mobile version.

<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar"
              data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="brand" href="#">Bitstarter</a> -->
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Based on Bootstrap 3 Navbar Collapse I tried using the following code increasing the max-width to 9000px, but it still expands as the desktop size increases.

/* Large desktop */
@media (max-width: 9000px) {
.navbar-header {
    float: none;
} 
.navbar-toggle {
    display: block;
}    
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}  
.navbar-collapse.collapse {
    display: none!important;
}  
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}   
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

Upvotes: 1

Views: 2717

Answers (1)

Christina
Christina

Reputation: 34652

Since the small viewport navigation ends at 767px and the menu breakpoint is 768px, let's copy the styles out of the un-packed Bootstrap CSS and use the same or greater specifity -- if possible, they use a good bit of !important (bummer) -- and put the CSS in a min-width.

HTML: Use accurate implementation of navbar construction as per the examples on GetBootstrap.com

There is no such class .navbar-inner in Bootstrap 3. Look at the migration guide (http://getbootstrap.com/migration/) and the examples on GetBootstrap.com

DEMO: https://jsbin.com/qorigo/1

CSS:

body { padding-top: 70px }

@media (min-width:768px) { 
    .navbar-header { float: none }
    .navbar-left,
    .navbar-right { float: none !important }
    .navbar-toggle { display: block }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        overflow: hidden;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
        visibility: hidden!important;
        height: 0px!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li { float: none }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.in {
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transition-duration: .35s;
        -o-transition-duration: .35s;
        transition-duration: .35s;
        -webkit-transition-property: height, visibility;
        -o-transition-property: height, visibility;
        transition-property: height, visibility;
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px }
    .navbar-nav .open .dropdown-menu > li > a { line-height: 20px }
    .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777 }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808 }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808 }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fff;
        background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444;
        background-color: transparent;
    }
}

Upvotes: 3

Related Questions