Fit navigation menu in a horizontal row

Question

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?

Here's my JS: https://jsfiddle.net/whywymam/dyreb439/

My HTML code:

<div class="container">

              <div class="upperRow">

                   <nav class="navbar-header logoFw">
                       <div class="col-xs-6 col-sm-3 col-md-4 col-lg-6">
                           <a href="home.php" class="brand navbar-brand "> <img src="image/logo.png" class="img-responsive"></a>
                       </div>
                   </nav>

                   <div id="btnTopInline">

                        <ul class= "nav navbar-nav navbar-right hidden-xs">
                                <div class="col-sm-3 col-md-4 col-lg-3">    
                                       <li>
                                         <div class="indivColl">
                                                <a href="signupLogin.php">
                                                   <img src="image/jobseekerlogo.png" class="indi">
                                                   <p class="indit">Job Seeker</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                                <div class="col-sm-3 col-md-4 col-lg-3">
                                       <li>
                                         <div class="empColl">
                                                <a href="signupLoginEmp.php">
                                                   <img src="image/employerlogo.png" class="emp">
                                                   <p class="empt">Employer</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                            <div class="clearfix visible-md-block"></div>

                        </ul>

                   </div><!-- end btnTopInline -->

                    <div class="col-xs-3 col-xs-push-4">
                       <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLogin.php">
                                Job Seeker<br>Log In
                            </a>
                        </button>
                    </div>

                   <div class="col-xs-3 col-xs-push-4">
                        <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLoginEmp.php">
                                Employer<br>Log In
                            </a>
                        </button>
                   </div>

            <div class="clearfix visible-xs-block"></div>

            <div class="clearfix visible-lg-block"></div>

        </div>



        <div class="middleRow">

                <div class="col-sm-12 col-md-12 col-lg-12">

                <nav class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div class="nav-collapse collapse-in" id="nav-collapse">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="home.php">Home<img src="image/home.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->

                </div>

            </div> <!-- end middle row -->


  </div><!-- end container -->

Answer 1

Well you can go and design two seprate menus one for small screen sizes and the other for normal screen sizes This could be done easy while using style sheets and adding a max. Size In the style sheet of the small screens make the big menu hidden and do the opposite on the other style sheet You can but the menu in a div to hide it faster You can design it fastly on adobe dreamweaver Hope this helps

Answer 2

Are you sure you want those titles inline with the pictures? because that's what's pushing your item out. If you'd just put the titles between tags (like <h3>Home</h3> etc), you should be all right. To keep them inline, put them in tags anyway, float the tags (with float:left or (better) display:inline-block) and then give the tag some max-width that keeps the total width contained.