Navigation menu not working

How do I fix these 3 issues facing my bootstrap navigation bar:

• Menu cannot collapse properly when resized (window made smaller)
• Have the icons beside the menu links instead of below them
• Have the sign up/login button link to another page when the window is resized

Here is a demo:

https://jsfiddle.net/whywymam/zpdpsuLn/

HTML Code:

<div class="container">

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

          <navbar>

              <div class="upperRow">

               <div class="navbar-header">
                    <a href="#" class="brand navbar-brand"> <img src="image/logo.png" class="img-responsive"></a>
               </div>

               <div id="btnTopInline">

                   <ul class="nav navbar-nav navbar-right imgicon hidden-xs">

                       <li>
                         <div class="indivColl">
                            <a href="signupLogin.php">
                               <img src="image/jobseekerlogo.png" class="indi">
                               <p class="indit">Job Seeker</p>
                            </a>
                         </div>
                       </li>

                       <li>
                         <div id="empColl">
                            <a href="signupLoginEmp.php">
                               <img src="image/employerlogo.png" class="emp">
                               <p class="empt">Employer</p>
                            </a>
                         </div>
                       </li>

                   </ul>

               </div>

               <!--                for tablet and mobile view-->
                <button type="button" class="btn btn-login pull-right visible-xs">
                    <a href="signupLoginEmp.php">
                        Employer<br>Log In
                    </a>
                </button>

                <button type="button" class="btn btn-login pull-right visible-xs">
                    <a href="signupLogin.php">
                        Job Seeker<br>Log In
                    </a>
                </button>

              </div>

            <div class="middleRow">

                <div 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" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Job<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </div> <!-- end inner navbar -->

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

          </navbar>

      </div> <!-- end col-lg-12 col-md-12 col-sm-12 col-xs-12 -->

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

CSS:

.img-responsive {
max-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}
.imgicon {
padding-left: 50%;
margin-top: -2%;
}

.middleRow{
padding-top: 10%;
margin-top: 5%;
}

.navcolor{
background-color: transparent;
}

.navbar-default {
margin-top: 3%;
}

.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}

#btnTopInline{
display: inline-block;
float: right;
clear: none;
}

@media(min-width:768px) {
  .nav-collapse{
        display: inline;
  }
  }

Thank you in advance :)