title: bootstrap 2 navbar break point change
body: <p>I am building a joomla template using built in bootstrap version 2.3.2. The problem is i have long navbar when it comes on tablets, it divide in two lines i would like to have it collapse at 1200px. I am using following code for navigation.</p>
  
  <pre><code>&lt;?php
  defined('_JEXEC') or die;
  
  // Add JavaScript Frameworks
  JHtml::_('bootstrap.framework');
  
  // Load optional rtl Bootstrap css and Bootstrap bugfixes
  JHtmlBootstrap::loadCss($includeMaincss = true);
  
  ?&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;jdoc:include type="head" /&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="&lt;?php echo $this-&gt;baseurl ?&gt;/media/jui/js/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;link href="templates/test/css/template.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="row-fluid"&gt;
          &lt;div id="logo" class="span12"&gt;&lt;a href="home.html"&gt;&lt;img src="templates/test/images/logo.png" alt="Home - Freeterm Limited, London"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;div class="row-fluid"&gt;
    &lt;nav class="span12 navbar"&gt;
       &lt;div class="navbar-inner"&gt;
              &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/a&gt;
       &lt;div class="nav-collapse collapse"&gt;&lt;jdoc:include type="modules" name="nav" style="none" /&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS is as below:</p>
  
  <pre><code>.navbar {
      margin: 0px;
  }
  
  .navbar-inner {
    min-height: 40px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #363f45;
    background-image: -moz-linear-gradient(top, #363f45, #363f45);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
    background-image: -webkit-linear-gradient(top, #363f45, #363f45);
    background-image: -o-linear-gradient(top, #363f45, #363f45);
    background-image: linear-gradient(to bottom, #363f45, #363f45);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
    border: 0px solid #d4d4d4;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
  }
  
  /* ----- Main Menu Styling ----- */
  
  .navbar .nav &gt; li &gt; a {
    font-family: 'helvetica', sans-serif;
    color: #fff;
    text-shadow: none;
    line-height: 80px;
    padding: 0 30px 0 30px;
    border-left: 1px solid #21262b;
  }
  .navbar .nav &gt; li &gt; a:focus,
  .navbar .nav &gt; li &gt; a:hover {
    color: #fff;
    background-color: #8dbf41;
  }
  .navbar .nav &gt; .active &gt; a,
  .navbar .nav &gt; .active &gt; a:hover,
  .navbar .nav &gt; .active &gt; a:focus {
    color: #fff;
    background-color: #8dbf41;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  
  .navbar .nav li.item-101 a {
      border-left: none;
  }
  
  /*----- Drop Menu -----*/
  
  nav .nav-child {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 160px;
      padding: 0px 0;
      margin: 0;
      list-style: none;
      background-color: #363f45;
      border: 0px solid #ccc;
      border: 0px solid rgba(0,0,0,0.2);
      *border-right-width: 0px;
      *border-bottom-width: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
      -moz-box-shadow: 0 px 0px rgba(0,0,0,0);
      box-shadow: 0 px 0px rgba(0,0,0,0);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
      background-clip: padding-box;
  }
  nav .nav-child.pull-right {
      right: 0;
      left: auto;
  }
  nav .nav-child .divider {
      *width: 100%;
      height: 1px;
      margin: 8px 1px;
      *margin: -5px 0 5px;
      overflow: hidden;
      background-color: #e5e5e5;
      border-bottom: 1px solid #fff;
  }
  nav .nav-child a {
      display: block;
      padding: 0px 20px;
      clear: both;
      font-size: 13px;
      font-family: 'helvetica', sans-serif;
      text-transform: uppercase;
      height: 50px;
      line-height: 50px;
      color: #fff;
      border: none;
      white-space: nowrap;
  }
  nav .nav &gt; li {
      position: relative;
  }
  nav .nav &gt; li:hover &gt; .nav-child,
  nav .nav &gt; li &gt; a:focus + .nav-child {
      display: block;
  }
  
  nav .nav-child li &gt; a:hover,
  nav .nav-child li &gt; a:focus,
  nav .nav-child:hover &gt; a {
      text-decoration: none;
      color: #fff;
      background-color: #8dbf41;
  }
  
  /*----- Nav Bar Button -----*/
  
  .navbar .btn-navbar {
    float: right;
    padding: 10px 10px;
    margin: 20px;
    margin-left: 5px;
    color: #ffffff;
    text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
    background-color: #363f45;
    *background-color: #363f45;
    background-image: -moz-linear-gradient(top, #363f45, #363f45);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
    background-image: -webkit-linear-gradient(top, #363f45, #363f45);
    background-image: -o-linear-gradient(top, #363f45, #363f45);
    background-image: linear-gradient(to bottom, #363f45, #363f45);
    background-repeat: repeat-x;
    border-color: #363f45 #363f45 #363f45;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
       -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
            box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
  }
  
  .navbar .btn-navbar:hover,
  .navbar .btn-navbar:focus,
  .navbar .btn-navbar:active,
  .navbar .btn-navbar.active,
  .navbar .btn-navbar.disabled,
  .navbar .btn-navbar[disabled] {
    color: #ffffff;
    background-color: #363f45;
    *background-color: #363f45;
  }
  </code></pre>