CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
user3130064
user3130064

Reputation: 1071

Twitter Bootstrap collapse menu in any resolution

I'm using the bootstrap 3, and I saw that collapse menu only appears at resolutions below 768px. I wanted him to be always visible at any resolution. Does anyone know how I do that?

thank you

Upvotes: 1

Views: 580

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362290

You could add CSS to override the Bootstrap CSS.. just make sure this CSS follows the bootstrap.css. Ideally, you'd place this CSS in another file (ie:style.css).

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

Demo: http://www.bootply.com/114980

Upvotes: 0

Tim
Tim

Reputation: 2637

I typically use the source version of Bootstrap, this comes with the original less files from which the Bootstrap CSS is generated.

The option you want to modify is the @grid-float-breakpoint option in the variables.less file. This lets you change the point at which the header swaps to using the collapsed menu.

See https://github.com/twbs/bootstrap#compiling-css-and-javascript for details on how to setup the tools required to build and customise Bootstrap 3.

Upvotes: 1

larrylampco
larrylampco

Reputation: 597

Bootstrap does this using media queries. You will want to override the Bootstrap media queries in order to do this.

Upvotes: 0

Related Questions