Make link clickable, but also have the dropdown? - html

Question

I have an navigation bar, where I have an "nav-item" with a dropdown function.
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.
I have two approaches:
1.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Navbar Toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Toggle END -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Navbar Items Links-->
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item">
<a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
</li>
<!-- Gruppen Dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#gruppen" id="navbardrop1" data-toggle="dropdown">Gruppen <i class="fas fa-users"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
<a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
<a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
</div>
</li>
<!-- Zahlungen -->
<li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
<i class="fas fa-receipt"></i>
</a></li>
</ul>
<!-- Navbar Items Rechts-->
<ul class="navbar-nav ml-auto">
<!-- Profil -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#asd">Profil bearbeiten <i
class="fas fa-user-edit"></i>
</a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<!-- Navbar Items END -->
</div>
</nav>
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.
2
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Navbar Toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar Toggle END -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Navbar Items Links-->
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item">
<a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
</li>
<!-- Gruppen Dropdown-->
<li class="nav-item">
<a class="nav-link" href="#gruppen">Gruppen <i class="fas fa-home"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
<a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
<a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
</div>
</li>
<!-- Zahlungen -->
<li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
<i class="fas fa-receipt"></i>
</a></li>
</ul>
<!-- Navbar Items Rechts-->
<ul class="navbar-nav ml-auto">
<!-- Profil -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#asd">Profil bearbeiten <i
class="fas fa-user-edit"></i>
</a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
</a>
</div>
</li>
<!-- /c:if -->
<li class="nav-item">
<a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<!-- Navbar Items END -->
</div>
</nav>
This one solution is really dirty in my opinion.
Isn't there a clean way to achieve a proper solution?
I'm pretty new to all HTML, Bootstrap and CSS.
EDIT: 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?

Answer 1

Your current code structure simplified:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
Gruppen <i class="fas fa-users"></i>
</a>
<div class="dropdown-menu">
...
</div>
</li>
As I understood - the aim is to make <i class="fas fa-users"></i> a separate dropdown link and the style should not degrade.
This will solve your issue:
<li class="nav-item dropdown nav-link">
<a href="/#yourlink">
Gruppen
</a>
<a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
<i class="fas fa-users"></i>
</a>
<div class="dropdown-menu">
...
</div>
</li>
The trick is in the nav-link class, which makes the propper positioning of your menu element. Moving it to the <li> element may have caused some conflicts in styles if the CSS was more complex, so be careful with moving class from one element to another in future.
Note: you must understand that the dropdown menu should not be made the way you want them now, because interacting with it the average user expects a dropdown after the click, not the redirect to some external page.