Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Alex Franklin
Alex Franklin
12,403 Points
Posted by Alex Franklin
Alex Franklin
12,403 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-->