Clever Geek Handbook

Bootstrap Responsive Navbar crashed in phone mode only (no tablet mode)

I have a responsive bootstrap menu, but I don't want to convert it in tablet mode. I am trying to reproduce the same menu in both desktop and tablet modes. the menu collapsed 940px or less, I want to make it 768px or less.

Can anyone help me? Thanks to

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>
+3


source to share


2 answers


The best way to do this is to recompile with 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 this variable: http://twitter.github.com/bootstrap/customize.html



+4


source


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


+4


source






More articles:


All Articles