title: bootstrap 4 navbar dropdown not working on IOS devices / safari
body: <p>I just uploaded a new bootstrap-site a couple of days ago. Since then I had reported, that the navbar does not work on IOS devices. The problem does not occur on any other device or browser, just Safari.</p>
  
  <p>When clicking/touching the hamburger symbol, the dropdown does open properly, but when clicking the submenu-dropdown the whole navbar collapses without showing the submenu. So therefore the submenu is not accessible at all - which basically makes the whole site inaccessible on IOS. </p>
  
  <p>Does anyone know a solution?
  Thanks</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;div class="container-fluid pb-2"&gt;
    &lt;nav class="navbar navbar-expand-md navbar-dark bg-alert fixed-top"&gt;
      &lt;a class="navbar-brand pr-4" href="../index.html"&gt;Naturpark Weissensee&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt; 
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item active dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Unterkunft buchen
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="dropdown1"&gt;
              &lt;a class="dropdown-item" href="Hotels.html"&gt;Hotels&lt;/a&gt;
              &lt;a class="dropdown-item" href="Pensionen.html"&gt;Pensionen&lt;/a&gt;
              &lt;a class="dropdown-item" href="Camping.html"&gt;Camping&lt;/a&gt;
              &lt;a class="dropdown-item" href="Ferienwohnungen.html"&gt;Ferienwohnungen&lt;/a&gt;
              &lt;a class="dropdown-item" href="Weissensee%20Umgebung.html"&gt;Weissensee Umgebung&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Sommer
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="dropdown2"&gt;
              &lt;a class="dropdown-item" href="Wasser.html"&gt;... am See&lt;/a&gt;
              &lt;a class="dropdown-item" href="Dorf.html"&gt;... im Dorf&lt;/a&gt;
              &lt;a class="dropdown-item" href="Wald.html"&gt;... im Wald&lt;/a&gt;
              &lt;a class="dropdown-item" href="Schifffahrt.html"&gt;Schiffrundfahrt&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Winter
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="dropdown3"&gt;
              &lt;a class="dropdown-item" href="Schnee.html"&gt;... im Schnee&lt;/a&gt;
              &lt;a class="dropdown-item" href="Eissport.html"&gt;... am Eis&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Information
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="dropdown4"&gt;
              &lt;a class="dropdown-item" href="Wissenswertes.html"&gt;Wissenswertes&lt;/a&gt;
              &lt;a class="dropdown-item" href="Anlaufstellen.html"&gt;Anlaufstellen&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>