CODEWITHSUNDEEP
navigationtwitter-bootstrap-3
Haribo83
Haribo83

Reputation: 165

Using collapsed navbar as default in Bootstrap3

Is there a way of using the collapsed version of the navbar for all versions of the site regardless of the size?

Have been changing the following but not sure if this is the most efficient way of doing this:

    @media (min-width: 768px) {
    .navbar > .container .navbar-brand {
    margin-left: -15px;
    }
    }
    .navbar-toggle {
      position: relative;
      float: right;
      margin-right: 15px;
      padding: 9px 10px;
      margin-top: 8px;
      margin-bottom: 8px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .navbar-toggle .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
    }
    .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
    }

Upvotes: 1

Views: 31

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

The CSS override could be simplified to this:

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.collapse.in{
  display:block !important;
}

http://www.bootply.com/nANH5ownG9

Upvotes: 0

cvrebert
cvrebert

Reputation: 9289

Yes, simply set the @grid-float-breakpoint Less variable (which lives in bootstrap/less/variables.less) to an absurdly high value (e.g. 999999999px) and then recompile Bootstrap.

Upvotes: 1

Related Questions