Bootstrap, navbar with fixed position


I have a navbar on the top of my html site. I recently wanted to change it so that the bar will always show on the page as the user scrolls down. I ran into a problem when doing this. For some reason, it takes the list and stacks it vertically when initially it is horizontally. I have been trying to find a solution for this but I am stuck. Here is what it looks like: I can not figure out how to keep the list horizontal, All help is greatly appreciated!

    <!-- first row -->
         <!-- first column -->
        <td colspan="2" style="position: fixed; top: 0px; right: 50%">       
      <div class="navbar" style="text-align: center; margin: 0 auto;">
      <div class="navbar-inner">

      <div class="brand">

       <a href=""> 

<ul class="nav">
  <li class="divider-vertical"><a href="#">Investors</a></li>
  <li class="divider-vertical"><a href="#">Deals</a></li>
  <li class="divider-vertical"><a href="#">Attornies</a></li>
  <li class="divider-vertical"><a href="#">Appraisers</a></li>
  <li class="divider-vertical"><a href="#">Contact Us</a></li>

  <li class="login">

        <button class="btn btn-primary" id="loginBtn" >Login</button>


    <li class="login">
            <button class="btn btn-primary" id="loginBtn" >Sign-Up</button>


         <!-- second column -->

         <!-- third column -->


Problem courtesy of: James Carter


wrap your nav bar in between these div elements

<div id="navbar" class="navbar navbar-fixed-top ">

Solution courtesy of: cooldude5757


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.