コンテナ要素内に含まれていない要素

Question

私のウェブサイト（ブートストラップで作られています）に、私のnavbarは最大幅800pxの容器.boxed＃wrapper内に埋め込まれています（最初の画像参照）。

この問題は、固定ナビゲーションメニュー（ユーザーがページを下にスクロールすると表示される）で発生します。

固定メニューでは、メニュー項目とロゴはコンテナ内に埋め込まれていないようです（最大幅は800pxです）。その結果、ロゴがビューポートの左端に表示され、画面のサイズにかかわらずメニュー項目が右端に表示され、ワイド画面では非常に奇妙に見えます。

私は、メニュー項目とロゴが最初の静的メニューと固定メニュー（例えばthis website）の位置にあるようにしたいと思います。

どうすればこの問題を解決できますか？

https://jsfiddle.net/cLt3pdzL/4/

初期位置を参照してください：あなたが笑うしようとしてますが、ChromeとFirefoxの両方で、ナビゲーションバーが表示されている

<div id="nav" class="container-fluid"> 
    <nav class="navbar-classic"> 
    <li><a href="index.html" class="active">Who are we? </a> 
     <ul class="dropdown"> 
     <li><a href="#">Sub 1</a></li> 
     <li><a href="#">Sub 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Services Services Services</a> 
    </li> 

    </nav> 
      <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a> 
</div> 

Answer 1

はここに私のソリューションです。私は、ナビゲーションバーの背景として、スクロールバーは230pxに達しない限り、目に見えないのdivを、作成している：

HTML：

<div id="nav" class="container-fluid"> 
     <nav class="navbar-classic"> 
     <li><a href="index.html" class="active">Who are we? </a> 
      <ul class="dropdown"> 
      <li><a href="#">Sub 1</a></li> 
      <li><a href="#">Sub 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Services Services Services</a></li> 
     </nav> 
     <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a> 
    </div> 
    <!-- End Menu Container --> 

CSS：

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    max-width: 800px; 
    height: 70px; 
    background: #fff; 
    z-index: 10; 
    opacity: 0.9; 
    margin: 0 0 0 -10px; 
    animation: fadein 2s; 
    -moz-animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
    -o-animation: fadein 2s; 
    padding: 0 25px; 
} 

#nav.affix > .navbar-classic { 
    height: 70px; 
} 

#nav.affix > .navbar-classic li { 
    padding: 22px 5px 0; 
} 

#hidden-header-bg{ 
    width: 100%; 
    height: 70px; 
    top: 0; 
    left: 0; 
    background: #fff; 
    display: none; 
    position: fixed; 
    z-index: 9; 
} 

.visible{ 
    display: block!important; 
} 

とJS：

$(document).ready(function() { 
    $(window).scroll(function(){ 
     scrollTop = $(window).scrollTop(); 
     if(scrollTop > 280){ 
     $('#nav').addClass('affix'); 
     $('#hidden-header-bg').addClass('visible'); 
     }else{ 
     $('#nav').removeClass('affix'); 
     $('#hidden-header-bg').removeClass('visible'); 
     } 
    }); 
    }); 

私の解決策のリンクです：0123あなたのスタイルに次のコードを追加し

Answer 2

：スクロール後

ダウンをあなたのjsfiddleの例でスクロールすると正しく表示されます。私も気づい

ことの一つは、あなたの接辞CSSがのパディングが欠落していることにあるナビゲーションバー-古典：

padding: 37px 5px 0; 

Answer 3

てみ

#nav.affix { 
    margin: 0px 50px; 
    width: auto !important; 
} 

あなたは、私がそのmargin-leftとmargin-rightがパディングに等しく適用され50pxでなければならないし＃nav.affixのスタイルを上書きしていることをここに気づくことがありbodyに設定し、widthをautoに設定します。それがあなたを助けることを願っています。ここにはworking fiddleがあります。

UPDATE：

このupdate fiddleはあなたが行った変更のお手伝いをすることがあります。固定するためにdivを使用し、もう1つの内側のdiv要素を使用して、好きなように整列させることをお勧めします。

Note: you were using <li> inside <nav>. I changed the <nav> to <ul>. Using <li> inside any other tags except <ul> and <ol> is not W3C valid.

私は、次のコードスニペットを変更しました::

<!-- Beg Menu Container --> 
    <div id="nav" class="container-fluid"> 
     <div class="nav-wrap"> 
      <ul class="navbar-classic"> 
       <li><a href="index.html" class="active">Who are we? </a> 
       <ul class="dropdown"> 
        <li><a href="#">Sub 1</a></li> 
        <li><a href="#">Sub 2</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Services Services Services</a> 
       </li> 

      </ul> 
      <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a> 

     </div> 

は、次のCSSスタイル追加：

.nav-wrap { 
    width:100%; 
    max-width:800px; 
    margin:0px auto; 
} 

そしてAND IGNORE MY PREVIOUS STYLE