title: Logo and menus in two lines in Bootstrap
body: <p>I recently encountered a problem with the <code>nav bootstrap</code> </p>
  
  <p>It seems to be perfect, but the size of <strong>992 to 768px</strong>, I can not stand to do the menu and the logo in <strong>the same row</strong>. </p>
  
  <p>Here is the image</p>
  
  <p><img src="https://i.stack.imgur.com/CXQBR.jpg" alt="enter image description here"></p>
  
  <p>Html Code</p>
  
  <pre><code>&lt;div id="main-header"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;nav class="navbar navbar-default navbar-static-top" role="navigation" id="navigation-home"&gt;
            &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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="index.html"&gt;&lt;img src="img/logo.png" class"img-responsive" alt="Logo PantaRei"&gt;&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
            &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav pull-right"&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="index.html" class="dropdown-toggle" data-toggle="dropdown"&gt; Home &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="index.html"&gt; Home Revolution Slider &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="home-flexslider.html"&gt; Home Flexslider&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="home-2.html"&gt; Home Style 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="home-3.html"&gt; Home Style 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="home-4.html"&gt; Home Style 4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="home-5.html"&gt; Home Style 5&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="one-page.html"&gt; One Page&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle navigation-effects" data-toggle="dropdown"&gt; Blog &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="blog-large.html"&gt; Large Blog &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="blog-medium.html"&gt; Medium Blog &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="blog.html"&gt; Small Blog &lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="single-post.html"&gt; Single Post &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; Features &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt; Grid System &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="pricing-tables.html"&gt; Pricing Tables &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="icon.html"&gt; Icons &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="typography.html"&gt; Typhography &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; Portfolio &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="portfolio-4.html"&gt; Portfolio 4 columns &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="portfolio-3.html"&gt; Portfolio 3 columns &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="portfolio-2.html"&gt; Portfolio 2 columns &lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="single-project.html"&gt; Single Project &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; Pages &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="gridsystem.html"&gt; Grid System &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="full-width.html"&gt; Full Width &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="custom-header.html"&gt; Custom Header &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="404.html"&gt; 404 Error &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="team.html"&gt; Team &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="search.html"&gt; Search Result &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="faq.html"&gt; FAQ &lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="contact-us.html"&gt;Contact Us&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt; &lt;!-- /.navbar-collapse --&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /.row --&gt;
    &lt;/div&gt; &lt;!-- /#main-header --&gt;
  </code></pre>
  
  <p>This is the <a href="http://jsfiddle.net/ryPKw/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>Does anyone know how to do? 
  Thanks in advance to all</p>