Here is an example of a navbar built using a series of anchor elements.
Notice that the entire thing is wrapped in a nav element with a .navbar class. The .navbar-expand-sm class tells Bootstrap the breakpoint at which to change from a full navbar to a toggled navbar. The toggled navbar will use a hamburger menu to show the menu options. The hamburger menu is configured inside the button element. Notice the .navbar-toggler class, the data-toggle attribute, and the data-target attribute. The div that wraps the menu options has the id that is referenced by the data-target attribute on the button element. See the #toggleNav. That’s the important id.
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleNav" aria-controls="toggleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleNav">
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="index.html"><i class="fas fa-home" style="color:white; vertical-align: middle;"></i></a>
<a class="nav-item nav-link" href="teo.html">TEO</a>
<a class="nav-item nav-link" href="texts.html">Texts</a>
<a class="nav-item nav-link active" href="#">Contact</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="http://ochre.uchicago.edu/" target="_blank">OCHRE</a>
</div><!-- navbar -->
</div><!--collapse-->
</nav><!-- nav -->