2016-11-23 15 views
-1

私はブートストラップを使用しています。下にスクロールすると、ナビゲーションバーが消えてしまいます。あなたが代わりにサイトを検査する、ここでのコードが必要な場合(それは少しのために、以下にもかかわらず。スクリーンショットを投稿するよりも、それは私のテストサイト上に置く方が簡単です。http://dev.melmsie.com/私のnavbarで何が間違っていますか?

、私に知らせてください。

ボーナス :?また、なぜ右(私は白を参照)

編集上のビットが欠けて私のメイン画像(野生の花)は次のとおりです。サイトの残りの部分を無視し、それが唯一の〜50%が

を行っています
<body> 
    <div class="container-fluid"> 
    <div class="main-section"> 
     <nav class=" navbar navbar-default"> 
      <div class="container-fluid col-md-12 col-xs-12"> 
      <div class="headers-bfg"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">BFG</a> 
       </div> 
       <div class="navbar-header"> 
       <a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> 
       </div> 
      </div> 
      <ul class=" nav navbar-nav "> 
       <li><a href="#">Balloons</a></li> 
       <li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li> 
       <li><a href="#">Flowers</a></li> 
       <li><i class="fa fa-circle" aria-hidden="true"></i></li> 
       <li><a href="#">Gifts</a></li> 
       <li><i class="fa fa-circle" aria-hidden="true"></i></li> 
       <li><a href="#">Hours</a></li> 
      </ul> 
      </div> 
     </nav> 



.navbar { 
position: fixed; 
width: 100%; 
} 

.nav { 
float: right; 
text-align: left; 
font-size: 20px; 
letter-spacing: .5px; 
+1

可能であれば、navbarのコードを追加することをお勧めします。 –

+0

@the_grits done –

答えて

2

このルールにはz-indexを追加するだけです。

.navbar { 
    z-index: 9000000; 
} 

あなたは、このドキュメントw3schoolsを見てZインデックスの詳細が必要な場合。

+0

これは、モーダルや他の何かを使うつもりがない場合は、Zインデックスの値が小さい方がいいです。ちょうどそれが常に他の要素の上にとどまるのに十分高く設定されるべきであることを覚えておいてください。 – Adrianopolis

+0

私はあなたに同意します。モーダルなどがある場合、彼はz-index – Sourceforest

1

あなたはちょうどあなたが

.navbar { 
    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 
1

を.nabarするには、以下のCSSへのzインデックスを追加することができます動作を上書きしたい場合は、私はあなたがしたいが、一番上にナビゲーションバーを設定し、常にユーザーということを理解しスクロールダウンしてもnavbarを参照してください。

これを試しましたか?

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

あなたは私が助けてきました願っていますfull explanation right here

を見ることができます。ない場合は、お知らせください。

0

単純にz-indexを追加しました。あなたはそれを.navbarクラスに追加する必要があります。

.navbar { 
    position: fixed; 
    width: 100%; 
    z-index: 9999; 
} 

画像と同様、コンテナ内に置いたときに完全な画像を表示したい場合。あなたはそれと同じようにする必要がある全幅の画像を使用しています。

1

nav-barの場合は完全に問題ありません。それは私や何かのために遠ざかることはありません。イメージを使って、私はそれの位置を特定することができました。あなたの "/css/bfg.css"に行くと、.main-sectionが見つかります。彼はあなたが背景のイメージを持っていて、好きなように設定しました。 .main-section画像の幅を編集するだけです(http://dev.melmsie.com/img/back.jpg)。簡単に幅を10%増やすために、幅の編集を続ける必要がないため、欠落している小さな領域です。

あなたの未完成のウェブサイトの外観だけでは素晴らしいです!
J. Carter :)

関連する問題