Search code examples
htmlbootstrap-4

Why won't my Bootstrap navigation bar display properly?


I am trying to make a navbar with Bootstrap 4, but my code doesn't seem to work. My code practically mirrors the tutorials, with only a few changes to nav-brand. What did I do wrong? Here is what it looks like.

<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="/">
    <img src="/assets/logo/logo.svg" width="30" height="30" class="d-inline-block align-top"
        alt="">
    <b class="hojasdeplata">Fourteen Trees</b>
</a>
<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

Solution

  • It turns out that I needed to move nav-brand into a div with the rest of the navigation.