CODEWITHSUNDEEP
csstwitter-bootstrap
Gonzalo
Gonzalo

Reputation: 2876

Bootstrap Responsive Navbar collapsed only on Phone Mode (No Tablet Mode)

I have a responsive bootstrap menu, but I don`t want to collaspe it in tablet mode. I try to dysplay the same Menu in desktop and tablet mode. the menu is collapsed at 940px or less, I want to do it at 768px or less.

Can anyone help me? Thanks

The code:

div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- I want to display this code only in Phone mode-->
      <a 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>
      </a>

      <a class="brand" href="#">Project name</a>

      <!-- This  part is hidden (collapsed) at 940px or less
           But I want to collapse it at 768px or less!!!!
      -->
      <div class="nav-collapse collapse">
           <!-- menu items -->
      </div>

    </div>
  </div>
</div>

Upvotes: 3

Views: 12524

Answers (2)

Ramy Hassan
Ramy Hassan

Reputation: 47

  1. Go to bootstrap-responsive.css file.
  2. Go to line number 952.
  3. Change the max-width from 979px to 768px.

Upvotes: 4

frostyterrier
frostyterrier

Reputation: 1912

The best way to do it would be to recompile using LESS and change the @navbarCollapseWidth variable from 979px to 768px. If you don't want to use LESS you can use the Customize page on the Bootstrap site to change that variable: http://twitter.github.com/bootstrap/customize.html

Upvotes: 4

Related Questions