title: Change Navbar breakpoint in Bootstrap 3.3.2
body: <p>I'm putting together a rough navbar using Twitter bootstrap.</p>
  
  <p><img src="https://i.stack.imgur.com/WmBpo.jpg" alt="TopNav1"></p>
  
  <p>There's a breakpoint at which the width of the device will cause the navbar items to collapse and show a menu button instead:</p>
  
  <p><img src="https://i.stack.imgur.com/XsXM3.jpg" alt="TopNav3"></p>
  
  <p>How can I change the breakpoint so the navbar collapses sooner? At the moment its able to break on to a new line when it comes up against the logo, which doesn't look too great:</p>
  
  <p><img src="https://i.stack.imgur.com/xgjqM.jpg" alt="TopNav2"></p>
  
  <p>I've tried a fix detailed <a href="https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint" rel="noreferrer">here</a>, but it seemed to break the collapsed menu (couldn't expand it again afterwards).</p>
  
  <p>Here's the html:</p>
  
  <pre><code>    &lt;!-- navigation --&gt;
      &lt;div class="navbar navbar-default navbar-static-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
  
                  &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-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;/button&gt;
  
                  &lt;a class="navbar-brand" href="#"&gt;&lt;img class="ManeEventLogo" src="/img/ManeEventLogoWhite-Sm.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse navbar-responsive-collapse"&gt;
  
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;
                          &lt;a href="/index.php"&gt;HOME&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;SERVICES &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu" role="menu"&gt;
                                  &lt;li&gt;&lt;a href="/services/cutting-styling/index.php"&gt;Cutting &amp; Styling&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/services/coloring/index.php"&gt;Coloring&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a href="/services/hair-straightening-relaxing/index.php"&gt;Permanent Hair Straightening &amp; Relaxing&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/services/balmain-hair-extensions/index.php"&gt;Balmain Hair Extensions&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;li&gt;
                          &lt;a href="/wedding-day/index.php"&gt;WEDDING DAY&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="/expertise-team/index.php"&gt;THE EXPERTISE TEAM&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="/photo-gallery/index.php"&gt;PHOTO GALLERY&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="/blog/index.php"&gt;BLOG&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>