ブートストラップナビバーの下にHTMLテンプレートを追加する方法

Question

テンプレートを作成してウェブサイトを販売しようとしていて、テンプレートのHTMLコンテンツの上にナビゲーションバーを追加したいとします。私はnavbarを定義した別のHTMLファイルを作成し、エンド・ユーザーがテンプレートをプレビューするときにHTMLファイルを呼び出します。テーマはBootstrap CSSも使用しているので、最初のHTMLファイルから呼び出されたnavbarの下に表示されます。助けてください

.editbar { 
    height: 48px; 
    position: fixed; 
    width: 100%; 
    min-width: 600px; 
    box-shadow: 0 0 15px 0 rgba(22, 45, 61, 0.5); 
    top: 0; 
    left: 0; 
    background-color: #fff; 
    z-index: 1450; 
    transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) top; 
} 

：

<div class="navbar navbar-inverse navbar-fixed-top" role="banner"> 

はCSS：テンプレートファイル内

<nav class="navbar navbar-default navbar-fixed-top editbar"> 

と、この：私は、最初のHTMLファイルに次のようました。

Answer 1

ここに答えがあります、

を、私は、CSSの助けを借りてそれをやりました。 CSSで次

<div class="navbar navbar-inverse navbar-fixed-top template" role="banner"> 

て、コメントを追加しました：：

はちょうどこのナビゲーションバーにクラスを追加

.template { 
    top: 44px; 
} 

乾杯！

Answer 2

position:fixed; CSSプロパティを使用してnavを配置します。通常のDOMシーケンスからdivを取り出し、DOMの上に置きます。 leftとtopプロパティを使用して、ビューポートの上部に配置できます。

nav { 
    position: fixed; 
    left:0px; 
    top:0px; 
    height:30px; 
    padding-top: 10px; 
    text-align: center; 
    width:100%; 
} 

navがおそらくメインコンテンツエリアと重なっているので、あなたのnav要素の組み合わせ高さとパディングして、メインのコンテンツブロックをオフセット。私の例では、高さが30px + 10px、40pxのスペースがあります。固定ヘッダーの下に表示されるように、メインのコンテンツを40ピクセルずつオフセットします。

私はあなたが同様にチェックアウトすることができCodepen例を作っ： http://codepen.io/staypuftman/pen/KzxeKZ