So I ran into this issue now after developing my entire page and I started working on my second page. I’m using the bootstrap 5 navigation bar. The way I’ve set up my nav bar is once it reaches a breaking point I disable the view and allow the full bar to show on larger screens.
Funny thing is that if you right-click and open a new tab it opens the correct page but I cannot just click on it to take me there.
This Issue only occures on the drop-down menu links. Not the main ul
Here is the code –
<nav class="navbar fixed-top navbar-light bg-light border-bottom border-secondary py-0 px-0">
<div class="container-fluid" id="navbar-custom-markup">
<a href="" class="navbar-brand p-2" id="navbar-hlink-markup"><img src="https://robotica.media/wp-content/uploads/2021/07/Robotica-White-300x100.png" id="navbar-logo-markup" alt="Robotica Logo" title="Robotica Logo" aria-label="Robotica Logo"></a>
<ul class="navbar-nav d-flex flex-row justify-content-center text-center" id="navbar-media-markup">
<li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">Cassie Gazette</a></li>
<li class="nav-item px-1"><a href="welcome-to-the-zoo.html" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">Welcome to the Zoo</a></li>
<li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">Benefits and Features</a></li>
</ul>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon alin"></span>
</button>
<div class="collapse navbar-collapse border-top" id="navbarNavDarkDropdown">
<ul class="navbar-nav my-2">
<li class="nav-item dropdown d-flex f-row navbar-dropdown-right-markup">
<a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="index.html" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">
Cassie Gazette
</a>
<a class="nav-link mx-1 text-white px-1 py-1 navbar-bold-markup" href="welcome-to-the-zoo.html" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">
Welcome to the Zoo
</a>
<a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">
Benefits and Features
</a>
</li>
</ul>
</div>
</div>
</nav>
Any Further Information required please do ask for it.
>Solution :
You have drop down attribute, class in wrong place.
For example
data-bs-toggle="dropdown" aria-expanded="false"
This is no need for menu item that is not drop down items.
Full edited:
<nav class="navbar fixed-top navbar-light bg-light border-bottom border-secondary py-0 px-0">
<div class="container-fluid" id="navbar-custom-markup">
<a href="" class="navbar-brand p-2" id="navbar-hlink-markup"><img src="https://robotica.media/wp-content/uploads/2021/07/Robotica-White-300x100.png" id="navbar-logo-markup" alt="Robotica Logo" title="Robotica Logo" aria-label="Robotica Logo"></a>
<ul class="navbar-nav d-flex flex-row justify-content-center text-center" id="navbar-media-markup">
<li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">Cassie Gazette</a></li>
<li class="nav-item px-1"><a href="welcome-to-the-zoo.html" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">Welcome to the Zoo</a></li>
<li class="nav-item px-1"><a href="#" class="nav-link text-white px-1 py-1 navbar-bold-markup" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">Benefits and Features</a></li>
</ul>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon alin"></span>
</button>
<div class="collapse navbar-collapse border-top" id="navbarNavDarkDropdown">
<ul class="navbar-nav my-2">
<li class="nav-item d-flex f-row">
<a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="index.html" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Cassie Gazette Page" title="Link to Cassie Gazette Page" aria-label="Link to Cassie Gazette Page">
Cassie Gazette
</a>
<a class="nav-link mx-1 text-white px-1 py-1 navbar-bold-markup" href="welcome-to-the-zoo.html" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Welcome to the Zoo Page" title="Link to Welcome to the Zoo Page" aria-label="Link to Welcome to the Zoo Page">
Welcome to the Zoo
</a>
<a class="nav-link text-white px-1 py-1 navbar-bold-markup" href="#" id="navbarDarkDropdownMenuLink" role="button" alt="Link to Benefits and Features Page" title="Link to Benefits and Features Page" aria-label="Link to Benefits and Features Page">
Benefits and Features
</a>
</li>
</ul>
</div>
</div>
</nav>
Please compare with your current HTML to see that what was changed. Maybe use Winmerge, Notepad++ and plugin, or your code editor, etc.