title: Fit navigation menu in a horizontal row
body: <p>I'm trying to fit my navigation bar in a single row. However when the window is less than 768px (tablet size), my last icon would be pushed to the next line. How can I fit them in a row?</p>
  
  <p>Here's my JS:
  <a href="https://jsfiddle.net/whywymam/dyreb439/" rel="nofollow">https://jsfiddle.net/whywymam/dyreb439/</a></p>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
                &lt;div class="upperRow"&gt;
  
                     &lt;nav class="navbar-header logoFw"&gt;
                         &lt;div class="col-xs-6 col-sm-3 col-md-4 col-lg-6"&gt;
                             &lt;a href="home.php" class="brand navbar-brand "&gt; &lt;img src="image/logo.png" class="img-responsive"&gt;&lt;/a&gt;
                         &lt;/div&gt;
                     &lt;/nav&gt;
  
                     &lt;div id="btnTopInline"&gt;
  
                          &lt;ul class= "nav navbar-nav navbar-right hidden-xs"&gt;
                                  &lt;div class="col-sm-3 col-md-4 col-lg-3"&gt;    
                                         &lt;li&gt;
                                           &lt;div class="indivColl"&gt;
                                                  &lt;a href="signupLogin.php"&gt;
                                                     &lt;img src="image/jobseekerlogo.png" class="indi"&gt;
                                                     &lt;p class="indit"&gt;Job Seeker&lt;/p&gt;
                                                  &lt;/a&gt;
                                           &lt;/div&gt;
                                         &lt;/li&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-sm-3 col-md-4 col-lg-3"&gt;
                                         &lt;li&gt;
                                           &lt;div class="empColl"&gt;
                                                  &lt;a href="signupLoginEmp.php"&gt;
                                                     &lt;img src="image/employerlogo.png" class="emp"&gt;
                                                     &lt;p class="empt"&gt;Employer&lt;/p&gt;
                                                  &lt;/a&gt;
                                           &lt;/div&gt;
                                         &lt;/li&gt;
                                  &lt;/div&gt;
  
                              &lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;
  
                          &lt;/ul&gt;
  
                     &lt;/div&gt;&lt;!-- end btnTopInline --&gt;
  
                      &lt;div class="col-xs-3 col-xs-push-4"&gt;
                         &lt;button type="button" class="btn btn-login visible-xs"&gt;
                              &lt;a href="signupLogin.php"&gt;
                                  Job Seeker&lt;br&gt;Log In
                              &lt;/a&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
  
                     &lt;div class="col-xs-3 col-xs-push-4"&gt;
                          &lt;button type="button" class="btn btn-login visible-xs"&gt;
                              &lt;a href="signupLoginEmp.php"&gt;
                                  Employer&lt;br&gt;Log In
                              &lt;/a&gt;
                          &lt;/button&gt;
                     &lt;/div&gt;
  
              &lt;div class="clearfix visible-xs-block"&gt;&lt;/div&gt;
  
              &lt;div class="clearfix visible-lg-block"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
          &lt;div class="middleRow"&gt;
  
                  &lt;div class="col-sm-12 col-md-12 col-lg-12"&gt;
  
                  &lt;nav class="navbar-inner navbar-default navbar-static-top navcolor"&gt;
  
                            &lt;div class="navbar-header "&gt;
  
                                &lt;!--button to appear when display is on mobile device--&gt;
                                &lt;button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse"&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;/div&gt;
  
                            &lt;div class="nav-collapse collapse-in" id="nav-collapse"&gt;
  
                                &lt;ul class="nav navbar-nav center-block"&gt;
                                  &lt;li&gt;&lt;a href="home.php"&gt;Home&lt;img src="image/home.png" class="hidden-xs" width="75" height="65" alt="" title="" /&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="about.php"&gt;About&lt;img src="image/about.png" class="hidden-xs" width="75" height="65" alt="" title="" /&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="pyw.php"&gt;Prove Your Worth&lt;img src="image/PYW.png" class="hidden-xs" width="75" height="65" alt="" title="" /&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Job&lt;img src="image/jobs.png" class="hidden-xs" width="75" height="65" alt="" title="" /&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="rescources.php"&gt;Resources&lt;img src="image/resource.png" class="hidden-xs" width="75" height="65" alt="" title="" /&gt;&lt;/a&gt;&lt;/li&gt;
                               &lt;/ul&gt;
  
                            &lt;/div&gt;
  
  
                      &lt;/nav&gt; &lt;!-- end navbar-inner navbar-default navbar-static-top navcolor --&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt; &lt;!-- end middle row --&gt;
  
  
    &lt;/div&gt;&lt;!-- end container --&gt;
  </code></pre>