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-0flex-sm-grow-1

Code

<navclass="nav navbar-expand-sm navbar-dark justify-content-between justify-content-sm-start"><aclass="navbar-brand"href=""id="homeOverride"><spanclass="overrideFonts"> Home </span></a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse flex-grow-0 flex-sm-grow-1"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item"><aclass="nav-link"href=""><spanclass="overrideFonts"> Projects </span></a></li><liclass="nav-item"><aclass="nav-link"href=""><spanclass="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