ブートストラップナビゲーションバーハンバーガーメニューは、私は、ブートストラップナビゲーションバーを持っているし、いくつかのブートストラップコンテンツの下に

Question

の下にコンテナを開きません。しかし、ハンバーガーメニューは、ビューポートが小さいときには開きません。理由は不思議です。

私は一番下に置くコンテナを削除すると、ナビゲーションの下に、物事は罰金に見えます。しかし、もう一度少し追加すると、私はnavbarを開くことができません。

https://jsfiddle.net/0yu7u2yc/1/

<div class="header container-fluid"> 

    <div class="row"> 
    <div class="brand col-sm-10 offset-sm-1 hidden-xs-down"> 
     <svg class="brand_logo"><use xlink:href="#brand_logo" /></svg> 
    </div> 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav mx-auto"> 

     <li class="nav-item active"> 
     <a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Pricing 
     </a> 

     <div class="dropdown-menu" aria-labelledby="dropdown_angebot"> 
      <a class="dropdown-item" href="softwareentwicklung.php">Action</a> 
      <a class="dropdown-item" href="qualitaetssicherung.php">Another action</a> 
     </div> 
     </li> 

     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com"> 
      Our Company 
     </a> 

     <div class="dropdown-menu" > 
      <a class="dropdown-item" href="geschichte.php">History</a> 
      <a class="dropdown-item" href="karriere.php">Career</a> 
      <a class="dropdown-item" href="klienten.php">Clients</a> 
     </div> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a> 
     </li> 
    </ul> 
    </div> 
</nav> 

    </div> 
</div> 


<div class="container-fluid"> 
     <div class="row"> 
     <div class="col-sm-10 offset-sm-1" style="background-color:red; height:500px; margin-top:50px;"> 
     If I remove this (whole) bit, the navbar hamburger menu works again. 
     </div> 
     </div> 
</div> 

SCSS

.header { 
    background-color: $background_header; 

    .brand { 
    display: flex; 
    justify-content: center; 
    align-items: center; 

    .brand_logo { 
     width: 200px; 
    } 
    } 

    .navbar-toggler { 
     margin-top: 20px; 
    } 

    .navbar { 
    height: 50px; 
    padding: 0 !important; 
    background-color: $background_header; 

    .navbar-nav { 
     display: table; 
     width: 100%; 
     list-style: none; 

     .nav-link { 
      padding: 0 !important; 
     } 

     li { 
     display: table-cell; 
     text-align: center; 

      a { 
      display: block; 
      text-align: center; 
      } 

      &:first-child a { 
       text-align: left; 
      } 
      &:last-child a { 
       text-align: right; 
      } 



      &:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu { 
       display: block; 
      } 
      .dropdown-menu { 
      // margin-top: 10px; 
      left: 50%; 
      transform: translateX(-50%); 
      } 

     } 
    } 
    } 
} 

Answer 1

ヘッダ下記コンテンツがハンバーガーメニューに重なります。これを試してみてください：

.navbar-toggler { 
    z-index: 99999; 
} 

Answer 2

hamburger-button要素は、その親（navbar）に高さを渡していません。したがって親要素の高さは1px + 2xのパディングです。これはボタンの上部だけをカバーします。上部のボタンをどのように押すことができるかに注目してください。ナビゲーションバーの要素のCSSにこれを追加します。

min-height: calc(40px + 1rem); 

（40ピクセルのボタンとパディングのための2倍.5remの高さです）。