Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Alex Franklin
Alex Franklin
12,397 Points

fixed-top not working as sticky?

I have followed the instructions of this video without change and everything works as expected, with the exception of the "fixed-top" command to make the navbar a stiky navbar at the top of the page.... Can someone please let me know what I'm doing wrong, or if this is ANOTHER outdated feature of some kind that I'm not aware of... really difficult taking these classes when I have no clue if I mad a mistake in my code, or if the videos are so outdated that I just am not aware that newer stuff has been released...

Link to my codepen where this is occurring: https://codepen.io/alex-franklin/project/live/DOeQPq/

HERE IS THE CODE:

<!--NAV TOP--> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top"> <div class="container">

<a class="navbar-brand order-1 mr-0" href="#https://codepen.io/alex-franklin/project/live/ZEyoyY/" target="_blank">Alex Franklin</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link ml-auto" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#about">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#speakers">Speakers</a>
  </li>

              <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle order-2" href="#schedule" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Schedule
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>

</ul>

</div><!--/ collapse navbar-collapse-->

</div><!--/ CONTAINER NAVBAR--> </nav> <!--/ NAV TOP-->