I'm currently in the process of integrating a navbar that transforms the navbar choices into a dropdown menu on smaller screens (as illustrated in the documentation available here). However, I am encountering an issue where the button responsible for toggling the display of the navbar items is not visible. Although the button is present in the HTML, it appears empty and does not trigger any action when clicked. Instead of seeing a dropdown with options such as a "home" link and a "login/register" button upon clicking the collapsible navbar button, nothing happens.
Here is the markup for the Navbar:
<nav class="navbar navbar-expand-lg primary">
<a class="navbar-brand" href="/">Blazor Finances</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a>
</li>
</ul>
</div>
</nav>
The above code functions correctly on larger screens but displays differently on small devices. Here's how it looks on smaller screens: https://i.sstatic.net/kw1Le.png
Additionally, here is a screenshot showing that while the navbar toggle button is rendered, it does not appear to be visible or functional: https://i.sstatic.net/DiFfO.png