Bootstrap Navbar-toggler

So, I'm messing with bootstrap for the first time, figuring out how things work. I've made good progress with navbars, but I'm absolutely stumped about the navbar-toggler.

Solution 1:

Just change this line

<nav class="nav navbar-expand-sm navbar-dark">

TO

<nav class="navbar navbar-expand-sm navbar-dark">

Solution 2:

Add these classes

To navbar

justify-content-between justify-content-sm-start

To #navbarSupportedContent

flex-grow-0 flex-sm-grow-1

Code

<nav class="nav navbar-expand-sm navbar-dark justify-content-between justify-content-sm-start">
    <a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0 flex-sm-grow-1" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
        </li>

      </ul>
    </div>
  </nav>

More info here https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content , https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink

Share