CSSナビがオーバーフローします。

Question

私は、コンテナに応答していないCSSナビゲーションを持っています。 JSFiddleでhereすべてうまくいきます。私がウェブサイトhereに置くと、モバイルメニューのドロップダウンリンクはラッパーの右上に移動し、コンテナには残りません。あなたが画面を縮小する場合は表示されます。現在、ウェブサイト上では、コードが矛盾している可能性があると考えているので、ヘッダセクションの外にあります。おかげ

CSS

.nav-mobile { 
    display: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: $nav-background; 
    height: $nav-height; 
    width: $nav-height; 
} 
@media only screen and (max-width: $breakpoint) { 
    // Hamburger nav visible on mobile only 
    .nav-mobile { 
    display: block; 
    } 
    nav { 
    width: 100%; 
    padding: $nav-height 0 15px; 
    ul { 
     display: none; 
     li { 
     float: none; 
     a { 
      padding: 15px; 
      line-height: 20px; 
     } 
     ul li a { 
      padding-left: 30px; 
     } 
     } 
    } 
    } 
    .nav-dropdown { 
    position: static; 
    } 
} 
@media screen and (min-width: $breakpoint) { 
    .nav-list { 
    display: block !important; 
    } 
} 
#nav-toggle { 
    position: absolute; 
    left: 18px; 
    top: 22px; 
    cursor: pointer; 
    padding: 10px 35px 16px 0px; 
    span, 
    span:before, 
    span:after { 
    cursor: pointer; 
    border-radius: 1px; 
    height: 5px; 
    width: 35px; 
    background: $nav-font-color; 
    position: absolute; 
    display: block; 
    content: ''; 
    transition: all 300ms ease-in-out; 
    } 
    span:before { 
    top: -10px; 
    } 
    span:after { 
    bottom: -10px; 
    } 
    &.active span { 
    background-color: transparent; 
    &:before, 
    &:after { 
     top: 0; 
    } 
    &:before { 
     transform: rotate(45deg); 
    } 
    &:after { 
     transform: rotate(-45deg); 
    } 
    } 
} 

Answer 1

は、あなたがここに表示されている

// Navigation 
nav { 
    position: relative; 

Answer 2

すべてのコードが動作するnavタグにCSSの下に追加します。絶対配置は、位置がabsoluteまたはrelativeの最も近い親の中に「ハンバーガー」ボタンを設定します。あなたのフィドルとウェブサイトの両方で、それは基本的に全身ですから、要素は右上に配置されています。

あなたがウェブサイト上でしたいものは、navbarに関して位置決めしています。 <nav>にposition: relativeを追加するか、希望する結果を.nav-containerに追加する必要があります。次に、追加するtopとleftのプロパティは、そのコンテナにボタンを配置します。