Вертикальный bootstrap navbar

.navbar-collapse { 
  background: linear-gradient(to top, #993333 0%, #FF6633 100%); 
  border-radius: 5px; 
} 
.navbar-default .navbar-nav>li>a { 
  color: #f3f3f3; 
  padding: 4px 68px; 
  font-size: 16px; 
  text-align: center; 
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); 
  font-weight: bold; 
} 
.navbar-default { 
  background-color: #fff; 
  border-color: #000000; 
  margin-top: 205px; 
} 
.navbar-default .navbar-nav>li>a:hover { 
  color: #ffc000; 
  height: 30px; 
  background: linear-gradient(to top, #FFFFCC 0%, #FFCC33 100%); 
} 
.navbar-nav>li { 
  border-right: 1px solid gray; 
  height: 100%; 
  float: left; 
  width: 25%; 
} 
.nav { 
  height: 30px; 
  font-size: 16px; 
} 
.navbar { 
  min-height: 10px; 
} 
.navbar .navbar-nav > li:last-of-type { 
  border-right: none; 
} 
.navbar-nav { 
  width: 100%; 
} 
.fon { 
  width: 100%; 
  height: 100%; 
  margin-left: 20%; 
  padding-top: -450px; 
} 
body { 
  background: url(images/44.jpg) no-repeat center top #edeef0; 
  background-size: 100%; 
} 
#logo { 
  width: 130px; 
  height: 77px; 
} 
#contacts { 
  margin-left: 60%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="style.css"> 
<!--[if lt IE 9]> 
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <div id="logo"> 
        <a href="index.html"> 
          <img src="images/primerlogo.png" alt="" /> 
        </a> 
      </div> 
    </div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <div id="contacts"> 
        <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: 
        <p> 
          <span style="font-size: 16px" class="glyphicon glyphicon-phone"></span>Телефон: +7-962-702-3737 
        </p> 
      </div> 
    </div> 
  </div> 
  <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-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="collapse navbar-collapse" id="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
        <li> 
          <a href="index.html">Главная</a> 
        </li> 
        <li> 
          <a href="demo.html">Другой </a> 
        </li> 
        <li> 
          <a href="catalog.html">Раздел 3</a> 
        </li> 
        <li> 
          <a href="contact.html">Контакты</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div> 
<div class="container-fluid"> 
  <nav class="navmenu navmenu-default" role="navigation"> 
    <ul class="nav navmenu-nav"> 
      <li class="active"><a href="#">Пункт 1</a> 
      </li> 
      <li><a href="#">Пункт 2</a> 
      </li> 
    </ul> 
  </nav> 
</div>