2つのヘッダーを持つブートストラップページ - 下はnavbar-fixed-topです - 下にスクロールするとコンテンツが上にオーバーレイされます

Question

私のC＃asp.net mvc Razor _layoutページでは2行ヘッダーを実装するソリューションを見つけることができませんでした/ナビゲーションバーナビゲーションバーに固定されたトップソーシャルメディアへの情報とリンクを連絡するハイパーリンクと上部のシンプルな1行機能•

ため

マイデザイン・コールを使用してブートストラップ・ページ ため。

ここで、標準のブートストラップ・ナビゲーションバー

•

の下には、私は（私がサイトを構築するために購入したテンプレートから）を実装するために必要なものを示すスクリーンショットである -

example without fixed-top

この実装の2行メニューには、どちらの行にもnavbar-fixed-topクラスがありません。

私は私のバージョンで実行 - スクロールダウンすると（標準ブートストラップナビゲーションバー）

- - ページの体がによって隠されている下の行のクラス=「ナビゲーションバーに固定されたトップ」としナビゲーションバー低いがトップナビゲーションバーが応答

に動作しない第二

底メニューが小さい/ XSMALL

01に正常に動作トップレベル・ヘッダー

の上部に示していますその一番上の行は、2つのX-小型のセットとして設定されても、カントー - 電話機に表示する場合の

しかし

ソーシャルメディアのアイコンは...だけ左端（電話、電子メールのリンクを）ラップトップに表示されないように-12列

（以下、標準のブートストラップナビゲーションバーは、私は私のコードは、標準のブートストラップの規則に沿ったものであると信じています（完全

に動作します...しかし、私はこれをバグとして報告していないです... /この設計はサポートされていないことを考えます機能性。

いくつかのスクリプトコードを使用して回避策がありますか？

•は、トップヘッダが本当に応答作成し、2つの側面を積み重ねるスクロール時のトップヘッダーの上に表示されてから体を維持

•：

私はへのベストプラクティスを示して答えを探していますページがsm-xsサイズに落ちると、その上の各ヘッダーの上のヘッダーが表示されます。

を考えると、ページがロードされた後、標準のナビゲーションバー上のトップメニューを注入角度やjQueryの機能 - とブラウザがすべての提案が高く評価

をサイズ変更された場合、そのプロセスを繰り返します。ありがとう、スティーブ

Answer 1

それは動作するようになった！あなたの中にはこの便利なものがあると思っています....ページからスクロールする複雑な（そしてシンプルな）ナビゲーションバーを持つ多くのトップサイト....ない非常に良好なユーザエクスペリエンス私見

ナビゲーションバー固定トップクラスリンクの両方の行が（1）一番上の行をラップ部分の特性であり、（2）ナビゲーションバー

（これも必要余白やパディングにCSSをいくつか変更するには....

不思議なことに、_Layoutに注入されたビューは、RenderBody（）を含むdivのContainer/Rowセクションに流され、レンダリングされたビューの背後にヘッダー..マージン設定で修正する必要があります

======= CONTAINER/ROWは、レイアウトVIA "RenderBody" 内に注入される=======

<div class="container-fluid"> 
    <div class="row"> 

    ******Main Page Content Here****** 


    </div> 
</div> 

HERE FIXだ...

  
 
navbar-fixed-top class is property of section that wraps the top row with links and the navbar 
 

 
    <section id="NFTParent" class="navbar-fixed-top"> 
 
        <header id="Header-1" class="header"> 
 
         @*<nav class="navbar navbar-default role=navigation">*@ 
 
         <div class="container"> 
 
          <div class="row"> 
 
           <div class="col-xs-12 col-sm-8 header-info-wrapper"> 
 
            <ul class="list-inline"> 
 
             <li><i class="fa fa-phone fa-lg"></i> Phone: 888-925-1858</li> 
 
             <li><i class="fa fa-envelope"></i> Mail: <a href="mailto: info@avanttek.com"></a></li> 
 
            </ul> 
 

 
            <!-- /.list-inline --> 
 
           </div> 
 
           <!-- /.header-info-wrapper --> 
 
           <div class="col-xs-12 col-sm-4 social-link-wrapper"> 
 
            <ul class="social-links"> 
 
             <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
             . 
 
             . 
 
             . 
 
             <li><a href="#"><i class="fa fa-envelope fa-lg"></i></a></li> 
 
            </ul> 
 

 
            <!-- /.social-links --> 
 
           </div> 
 
           <!-- /.social-link-wrapper --> 
 
          </div> 
 
          <!-- /.row --> 
 
         </div> 
 
         @*</nav>*@ 
 
         <!-- /.container --> 
 
        </header> 
 
        <!-- /.header-1 --> 
 
        @*<header id="header-2" class="header navbar-fixed-top">*@ 
 
        <header id="header-2" class="header"> 
 
         <nav class="navbar navbar-default" role="navigation"> 
 
          <div class="container"> 
 
           @*<div class="row">*@ 
 
           <!-- Brand and toggle get grouped for better mobile display --> 
 
           <div class="navbar-header"> 
 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
             <span class="sr-only">Toggle navigation</span> 
 
             <span class="icon-bar"></span> 
 
             <span class="icon-bar"></span> 
 
             <span class="icon-bar"></span> 
 
            </button> 
 
            <a class="navbar-brand" href="#">Avant<span>Tek</span></a> 
 
           </div> 
 
           <!-- Collect the nav links, forms, and other content for toggling --> 
 
           <div class="navbar-collapse navbar-ex1-collapse collapse" aria-expanded="false" style="height: 0.666667px;"> 
 
            <ul class="nav navbar-nav"> 
 
             <li class="dropdown"> 
 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Home</a> 
 
              <ul class="dropdown-menu"> 
 
               <li><a href="#">Home Layout 1</a></li> 
 
               <li><a href="#">Home Layout 2</a></li> 
 
               <li><a href="#">Home Layout 3</a></li> 
 
               <li><a href="#">Home Layout 4</a></li> 
 
               <li><a href="#">Home Layout 5</a></li> 
 
              </ul> 
 
             </li> 
 
           <!-- /.container --> 
 
          </div> 
 
         </nav> 
 
         <!-- /.navbar --> 
 
        </header> 
 
       </section> 
 
      </div> 
 

 
       <div> 
 
        @RenderBody() 
 
       </div> 
 

 
=================== CONTAINER/ROW IS INJECTED INTO LAYOUT VIA RenderBody() =========================== 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
LORUM IPSUM ..... CONTENT EMBEDDED IN ROW COLUMNS 
 
    </div> 
 

 

 
</div>