1

I'm currently trying to implement a navbar that turns the navbar selections into a dropdown at small screen sizes (as the documentation shows here. However, the button which should toggle the navbar items displaying is not showing up. It is rendered in the html but the button is empty and upon clicking the button which is responsible for collapsing the navbar, nothing displays (no dropdown of options, where id expect a "home" link and a "login/regiser" button)

Navbar markup:

<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>

which works fine on large screen sizes, but looks as follows on small devices: enter image description here

and a screenshot showing the navbar toggling button is rendered but doesn't seem to be displayed and isn't operable: enter image description here

kukkuz
  • 41,512
  • 6
  • 59
  • 95
GregH
  • 5,125
  • 8
  • 55
  • 109

1 Answers1

6

Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light 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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95