Difficulties getting the Hamburger Menu icon to appear in Bootstrap 4

Hey friends,

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>

You need to add either navbar-inverse or navbar-light class the <nav> element for it to work

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">

Also your id’s don’t match. In <button> you have data-target="#navbarsExampleDefault" but in the collapse div you have id="navbarSupportedContent">. Your menu won’t show when you click on the hamburger if they don’t match

You should also add jQuery and the Bootstrap javascript to your pen otherwise you might run unto problems later using Bootstrap components

4 Likes

Thank you so much! I was looking everywhere last night for a simple explanatory breakdown of what all of the different parameter fields referred to in the Button element, but couldn’t find anything–only more lists of parameters. I had no idea that the ‘data-target’ parameter in Button was supposed to target the ID found in the ‘collapse’ div, but in retrospect that makes sense.