I’ve spent pretty much all afternoon and evening on this particular problem. While putting together my Personal Portfolio for the second project, I ran into a brick wall because I couldn’t get the collapsible hamburger menu icon to appear.
I’ve copied and pasted examples from Bootstrap’s website, from various guides I could find on Google, and so on–and after adjusting the classes to match my preferred navbar appearance, the icon simply will not appear.
It’s not even invisible. There simply isn’t anything in the corner where it’s supposed to appear. If you hover your mouse there, there’s nothing. So it’s not a matter of the black background color for the navigation menu.
I’m just starting out, and I’m eager to learn–why is this happening? How can I get this to appear on smaller screens? With the advent of Bootstrap 4, I’ve learned, I can’t even rely on the old Glyphicon system.
The link I put in here goes to the project, but copy it over here for ease of access:
<nav class="navbar fixed-top navbar-toggleable-md"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="page-top">Spencer Merrell</a> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>