Navbars

Navbars are typically used across the top of your web pages, to allow your visitors to navigate around your website.

When adding Navbars, I would generally only have a maximum of around 6 or 7 top level links to keep your navigation from looking too busy. So, if needed, each top level section can have dropdown sub-menus to navigate to pages related to each section.

Quick tip: If you decide that you want your navbar fixed at the top (as I did for this website), so it's visable when scrolling, just add fixed-top class to the nav element (<nav class="navbar fixed-top ), then be sure to add to your css body padding-top: 65px; which will prevent any of your content from being hidden at the top when you fix your navbar.

        
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" 
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarColor02">
                    <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>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>