Как сделать меню с двумя уровнями в бутстрапе 3?

Question

Я пытаюсь сделать меню двойного уровня в Bootstrap 3, чтобы выглядеть следующим образом:

У меня возникли проблемы с меню на верхнем маржинальном-топ (я не знаю, как оды это потому, что я уже изменяли меню для пользовательской высоты)

Вот код

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
<div class="container navbar_height"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Menu</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="navbar-brand-left"></div> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a class="hover_navbar glyphicon glyphicon-home" href="#"></a></li> 
      <li><a class="hover_navbar" href="#">ITEM1</a></li> 
      <li><a class="hover_navbar" href="#">ITEM2</a></li> 
      <li><a class="hover_navbar" href="#">ITEM3</a></li> 
      <li><a class="hover_navbar" href="#">ITEM5</a></li> 
      <li><a class="hover_navbar" href="#">ITEM6</a></li> 

     </ul> 


    </div 
</div> 

И я добавил CSS

@media (min-width: 1023px){ 
.navbar{ 
position: relative; 
min-height: 50px; 
margin-bottom: 0px !Important; 
border: 1px solid transparent; 
} 

.navbar_height{ 
margin-top:40px; 
} 

.navbar-inverse .navbar-nav > li > a:hover{ 
    border-bottom: 4px solid #a6ba0d 
} 

.navbar-right{ 
    border-top: 1px solid #ededed; 
} 

.navbar-brand-logo img{ 
    margin-top:-20px; 
} 

}

К сожалению я не ставил код на jsfiddle (это не работает на моем браузере)

Answer 1

Ответ прост, я сделал это:

после того, как:

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
<div class="container"> 

Я добавил:

<div class="navbar-collapse collapse desktop-only"> 
     <ul class="nav navbar-nav pull-right desktop-only"> 
      <li><a class="" href="#">item1up</a></li> 
      <li><a class="" href="#">item2up</a></li> 
      <li><a class="" href="#">item3up</a></li> 
     </ul> 


    </div> 

и некоторые CSS, чтобы быть видимым только в рабочем столе:

@media (max-width: 1023px){ 
.desktop-only{ 
    display:none; 
}}