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.

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/ 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:

@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:

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

See the Pen Untitled by Pascale Beier (@PascaleBeier) on CodePen.