ブートストラップ3：デスクトップ上に2行のナビゲーションバーをモバイル上で1行のナビゲーションバーに切り替える

Question

デスクトップ上の2行ナビゲーションをモバイル上の1行ヘッダーに折り畳むことを試みます。最初の行はトップバー、2番目の行はメインナビゲーションです。モバイルデバイスで2番目のバーを非表示にして、次のようにするにはどうすればよいですか。

事前に少し助けてくれてありがとう！ここで

デスクトップ

+-------------------------------------------------------------------------------+ 
| BRAND            Call us | Cart | Login | 
|-------------------------------------------------------------------------------| 
|        Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | 
+-------------------------------------------------------------------------------+ 

モバイル

+-------------------------------------------------------------------------------+ 
| TOGGLE_MAIN       BRAND      TOGGLE_TOP | 
+-------------------------------------------------------------------------------+ 

私が現在持っているものです：

Fiddle

Answer 1

あなたがモバイルビューの追加の2行目を非表示にしたい場合後の "hidden-xs"このようなあなたの第2列のdiv内ナビゲーションバーナビゲーションバー-デフォルト：

<!-- Second Row --> 
<div class="navbar navbar-default hidden-xs" id="header"> 

<div class="container"> 
<div class="row"> 
<div class="navbar-header"> [...] 

https://jsfiddle.net/bmuma5ow/13/

ここでEDIT // --------------

は、実用的なソリューションであります（CSSの "隠された-XS" を削除、編集）：ここで

@media (max-width : 767px) { 
    .navbar-brand { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    margin:0 auto; 
    z-index:-1; 
    } 
    .header #toggleTop { 
    float:left; 
    margin-left:15px; 
    } 
    .navbar-default { 
     background-color: #fff; 
     border-width: 0; 
     margin-top: 0px; 
     z-index: 5; 
    } 
    #navbar-collapse2 { 
    margin-top: 50px; 
    } 
} 

ルック：http://jsfiddle.net/bmuma5ow/15/