Bootstrap 5 Navbar doesnt open links set in "href"

Question

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.

Answer 1

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>

See it in action.

Please compare with your current HTML to see that what was changed. Maybe use Winmerge, Notepad++ and plugin, or your code editor, etc.