---
title: "Bootstrap 4: Klickbare Dropdown-Menüs"
canonical: "https://pascalebeier.de/bootstrap-4-klickbare-dropdown-menues"
pubDate: "2017-09-08T10:18:59.000Z"
author: Pascale Beier
description: Lange mussten wir auf den ersten Beta-Release des beliebten (S)CSS-Frameworks warten. Auch hier gibt es allerdings wieder die bekannte Problematik der…
tags: [bootstrap]
categories: [Webdesign]
---

Lange mussten wir auf den ersten Beta-Release des beliebten (S)CSS-Frameworks warten. Auch hier gibt es allerdings wieder die bekannte Problematik der nicht-klickbaren Dropdown-Menü Links. <!--more-->

### Das Problem

Ich habe ein Dropdown-Menü in meiner Navbar und möchte den übergeordneten Link auch anklicken - und anschließend auch dem entsprechenden Link folgen. Das geht aber nicht. Hier gibt es eine Demo dazu! [//jsfiddle.net/cdLgyL6a/8/embed/result,html/](//jsfiddle.net/cdLgyL6a/8/embed/result,html/) Hier kann der Über uns-Link, der auf auf http://example.org/about-us verweist nicht angeklickt werden.

### Die Lösung

Lösungen dazu kursieren zuhauf bei StackOverflow und Konsorten. Die meisten sind aber für Bootstrap 3. Hier ist mein Ansatz dazu. **CSS:**

```css
@media (min-width: 768px) {
  // Dropdown ab Desktop per Hover ausklappen
    .dropdown:hover .dropdown-menu {
    display: block;
  }
  // Dafür sorgen, dass man mit der
   // Maus das Dropdown betreten kann
   // ohne dass es frühzeitig schliesst.
  .dropdown-menu {
    margin-top: 0 !important;
  }
}
```

**Nachtrag vom 12.09.2017**: Der JavaScript-Code wurde dahingehend geändert, dass er die zuvor gesetzte CSS Eigenschaft überprüft. Damit ist das alles auch responsiver. **JavaScript:**

```javascript
function clickDropdown() {
  if ($('.navbar-toggler').css('display') === 'none') {
    $('.dropdown-toggle').click(function () {
      window.location.href = $(this).attr('href');
      return false;
    });
  }
}
$(document).ready(function () {
  clickDropdown();
  $(window).resize(function () {
    clickDropdown();
  });
});
```

### Demo der Lösung

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BdgPre" data-pen-title="Untitled" data-user="PascaleBeier" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/PascaleBeier/pen/BdgPre">
  Untitled</a> by Pascale Beier (<a href="https://codepen.io/PascaleBeier">@PascaleBeier</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>