title: Make link clickable, but also have the dropdown?
body: <p>I have an navigation bar, where I have an "nav-item" with a dropdown function.</p>
  
  <p>But what I want is the "button / nav-item", that is visible in the navb-bar to be clickable and have a redirect to another page, and then the dropdown arrow should be on the right side, where you can click on the arrow and then get the dropdown menu.</p>
  
  <p>I have two approaches:</p>
  
  <p><b>1.</b></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /&gt;
  &lt;nav class="navbar navbar-expand-md bg-dark navbar-dark"&gt;
    &lt;!-- Navbar Toggle --&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;!-- Navbar Toggle END --&gt;
    &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
      &lt;!-- Navbar Items Links--&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;!-- Home --&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="../Startseite/Index.jsp"&gt;Home &lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;!-- Gruppen Dropdown--&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#gruppen" id="navbardrop1" data-toggle="dropdown"&gt;Gruppen &lt;i class="fas fa-users"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
            &lt;a class="dropdown-item" href="#gruppe1"&gt;Gruppe 1&lt;/a&gt;
            &lt;a class="dropdown-item" href="#gruppe2"&gt;Gruppe 2&lt;/a&gt;
            &lt;a class="dropdown-item" href="#gruppe3"&gt;Gruppe 3&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;!-- Zahlungen --&gt;
        &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp"&gt;Zahlungen
                  &lt;i class="fas fa-receipt"&gt;&lt;/i&gt;
              &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Navbar Items Rechts--&gt;
      &lt;ul class="navbar-nav ml-auto"&gt;
        &lt;!-- Profil --&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown"&gt;Benutzer &lt;i class="fas fa-user"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="dropdown-menu dropdown-menu-right"&gt;
            &lt;a class="dropdown-item" href="#asd"&gt;Profil bearbeiten &lt;i
                              class="fas fa-user-edit"&gt;&lt;/i&gt;
                      &lt;/a&gt; &lt;a class="dropdown-item" href="#asd"&gt;Abmelden &lt;i class="fas fa-sign-in-alt"&gt;&lt;/i&gt;
                  &lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" href="../Registrieren/Registrieren.jsp"&gt;Registrieren &lt;i class="fas fa-sign-in-alt"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Navbar Items END --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This one is from the design what I am looking for, but I would like the  element "Gruppen" clickable, so it redirects you to another page.</p>
  
  <p><b>2</b></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /&gt;
  &lt;nav class="navbar navbar-expand-md bg-dark navbar-dark"&gt;
    &lt;!-- Navbar Toggle --&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;!-- Navbar Toggle END --&gt;
    &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
      &lt;!-- Navbar Items Links--&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;!-- Home --&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="../Startseite/Index.jsp"&gt;Home &lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;!-- Gruppen Dropdown--&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#gruppen"&gt;Gruppen &lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown"&gt;&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
            &lt;a class="dropdown-item" href="#gruppe1"&gt;Gruppe 1&lt;/a&gt;
            &lt;a class="dropdown-item" href="#gruppe2"&gt;Gruppe 2&lt;/a&gt;
            &lt;a class="dropdown-item" href="#gruppe3"&gt;Gruppe 3&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;!-- Zahlungen --&gt;
        &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp"&gt;Zahlungen
                  &lt;i class="fas fa-receipt"&gt;&lt;/i&gt;
              &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Navbar Items Rechts--&gt;
      &lt;ul class="navbar-nav ml-auto"&gt;
        &lt;!-- Profil --&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown"&gt;Benutzer &lt;i class="fas fa-user"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="dropdown-menu dropdown-menu-right"&gt;
            &lt;a class="dropdown-item" href="#asd"&gt;Profil bearbeiten &lt;i
                              class="fas fa-user-edit"&gt;&lt;/i&gt;
                      &lt;/a&gt; &lt;a class="dropdown-item" href="#asd"&gt;Abmelden &lt;i class="fas fa-sign-in-alt"&gt;&lt;/i&gt;
                  &lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;!-- /c:if --&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" href="../Registrieren/Registrieren.jsp"&gt;Registrieren &lt;i class="fas fa-sign-in-alt"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Navbar Items END --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This one solution is really dirty in my opinion.</p>
  
  <p>Isn't there a clean way to achieve a proper solution?
  I'm pretty new to all HTML, Bootstrap and CSS.</p>
  
  <p><strong>EDIT:</strong> I have no idea why, but i have run the two exact same code snippets on my local server, and the outcome was different... I want it to like the second approach, but without the arrow being a navitem by it's own, but when I do it, the dropdown arrow is at the top of the navbar, like above all the text. is there a way to fix that?</p>