导航栏切换按钮不显示折叠的元素

Question

I'm currently trying to create a button that will reveal me the collapsed navigation links when the screen gets too small. The button does materialize, but I can't get it to perform anything besides appearing when the screen gets small.

The toggle button also creates small '>' arrows when I only intended to have the white "-" lines in the button.

I realized that jquery and bootstrap's js files should be included at the bottom of the body tag, but so far I've had no luck even with those added. Any help is appreciated.

https://codepen.io/Tintinator/pen/NvKRvO

<div class="navbar navbar-default navbar-static-top navbar-inverse">

  <div class="container">

    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-
      toggle="collapse" data-target=".navbar-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav" id="navilinks">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>

  </div>

</div>

Answer 1

You have wrong data-target attribute and a css rule that limits nav height (50px) which doesn't let it to expand properly. And I believe parent element should be nav not div.

Try this instead:

<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">

  <div class="container">

    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse" id="navilinks">
      <ul class="nav navbar-nav" >
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>

  </div>

</nav>

https://codepen.io/anon/pen/oevYvp

Answer 2

I'm not sure if this is is, but did you add the plugin? (see image)

Answer 3

Within your codepen, I modified a couple lines of code and it seems to do the trick. I changed the data-target from a class to an id of #navbar and then updated the initial div in your "NAV LINKS" to include the id of #navbar. I forked your codepen for you. https://codepen.io/ckroll17/pen/qXWqbV

<!--           
      Changed button to data-target to #navbar
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./newnewfoy.png">
          </a>
        </div>

        <!-- NAV LINKS -->
        <!-- Added an id of navbar to the class directly below -->
        <div id="navbar" class="navbar-collapse collapse">