0

I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right

   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
          <div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
        </div>

        <div class="navbar-collapse collapse" id="myNav">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#employment">Employment</a></li>
            <li><a href="#connect">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>
Krzysztof Janiszewski
  • 3,763
  • 3
  • 18
  • 38
Corey Townsend
  • 11
  • 3

2 Answers2

0

You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:

<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">

Then, add some script:

function toggleMenu() {
  let menu = document.getElementById('menu');
  menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does
}

After that, you'll have to add some CSS to style your menu for when it's opened.

Jordan
  • 148
  • 1
  • 11
0

Looks fine to me, just be sure that your view width is less than 768px, otherwise the hamburger will be hidden.

Michael
  • 128
  • 6