My Links don't get highlighted as a I scroll down

Question

Hey guys, I inserted the correct ids, attributes to <body> and position: relative to the CSS but the links don't seem to get highlighted. Any thoughts on what I'm doing wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css" class="css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <title>Full Stack Conf</title>
  </head>

<body id="home" data-spy="scroll" data-target="#nav">

  <nav id="nav" class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded">
    <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home</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">
          <a class="nav-link" href="#schedule">Schedule</a>
        </li>
      </ul>
    </div>
    <a class="navbar-brand pull-sm-right mr-0 hidden-sm-down" href="https://teamtreehouse.com">Presented by Treehouse</a>
    </div>
  </nav>

  <!-- jumbotron -->

  <div class="jumbotron jumbotron-fluid bg-info text-white">
    <div class="container text-sm-center pt-5">
      <h1 class="display-2">Full Stack Conf</h1>
      <p class="lead">A One-day Conference About All Things JavaScript!</p>
      <div class="btn-group mt-4" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#modalForm">Register Now</button>
        <button type="button" class="btn btn-lg btn-secondary" data-target="#speakers">See Speakers</button>
      </div>
    </div>
  </div>

  <!-- /jumbotron -->

  <div class="container p-t-2">    <!--     CONTAINER -->
    <div id="about" class="row">
  <!--     ABOUT SECTION -->
      <div class="col-lg-4 push-lg-4">
        <h3 class="mb-4">About Full Stack Conf</h3>
        <img class="img-fluid rounded hidden-xs-down mb-3" src="https://www.dropbox.com/s/fecbcc3jfp7t6fk/pdx.jpg?raw=1" alt="" />
        <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
        <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
      </div>
      <div class="col-lg-4 pull-lg-4">
        <h3 class="mb-4">Expert Speakers</h3>
        <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
        <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
        <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
      </div>
          <div class="col-lg-4">
        <h3 class="mb-4">What You'll Learn</h3>
          <div class="list-group">
            <a href="#" class="list-group-item"><strong>MongoDB</strong>: NoSQL database</a>
            <a href="#" class="list-group-item"><strong>Angular</strong>: JavaScript framework </a>
            <a href="#" class="list-group-item"><strong>Express</strong>: Framework for Node</a>
            <a href="#" class="list-group-item"><strong>Node.js</strong>: JavaScript environment</a>
            <a href="#" class="list-group-item"><strong>ES2015</strong>: Latest version of JavaScript</a>
            <a href="#" class="list-group-item"><strong>Babel</strong>: JavaScript compiler</a>
          </div>
      </div>


    <!--     /ABOUT SECTION -->
  </div>    <!--     /ABOUT CONTAINER -->

  <!--     SPEAKERS SECTION -->

  <h1 class="display-4 text-center my-5 text-muted">Speakers</h1>

    <div id="speakers" class="row">
      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/e5yv6kvk0w1re7h/angie.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Angie McAngular</h4>
            <p class="card-text">Angie is a webdeveloper and teacher who is pasionate about building scalable, data-driven web apps, especially ones that address old problems with new tech.</p>
           </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/x8lubwr857qiunx/nodestradamus.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">NodeStradamus</h4>
            <p class="card-text">"NodeStra" is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.</p>
           </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/dal2azfdvqzt9ct/geo.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Geo "Lo" Cation</h4>
            <p class="card-text">Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.</p>
           </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/6jbwxxh9p3eh6nt/ecma.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Ecma Scriptnstuff</h4>
            <p class="card-text">Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.</p>
           </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/wmhml1m7teaz1yw/jay.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Jay Query</h4>
            <p class="card-text">Jay is a developer, author of CSS: The Missing Manual, JavaScript &amp; jQuery: The Missing Manual, and web development teacher.</p>
           </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 mt-3">
         <div class="card">
          <img class="card-img-top img-fluid" src="https://www.dropbox.com/s/ey25h535g7z6dxh/json.png?raw=1" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Json Babel</h4>
            <p class="card-text">All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.</p>
           </div>
        </div>
      </div>
    </div>

    <!-- /speakers -->

  <!--     SCHEDULE SECTION -->

  <h1 id="schedule" class="display-4 text-center my-5 text-muted">Schedule</h1>

    <!-- schedule -->
  <ul class="list-group">
    <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Keynote: Internet of Things</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">9:00am</span>
      </div>
      <p class="mb-1">NodeStradamus</p>
    </li>
    <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Angular Basics</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">10:00am</span>
      </div>
      <p class="mb-1">Angela McAngular</p>
    </li>
    <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Hey, Mongo!</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">11:00am</span>
      </div>
      <p class="mb-1">Jay Query</p>
    </li>
    <li class="list-group-item list-group-item-action list-group-item-success flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Lunch</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">12:00pm</span>
      </div>
      <p class="mb-1">Free pizza for everyone.</p>
    </li>
     <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Introducing ES2015</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">1:00pm</span>
      </div>
      <p class="mb-1">Ecma Scriptnstuff</p>
    </li>
    <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">Gettin' MEAN</h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">2:00pm</span>
      </div>
      <p class="mb-1">Geo "Lo" Cation</p>
    </li>
    <li class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">What's Babel? </h5>
        <span class="badge badge-default badge-pill bg-info px-2 py-2 mt-2">3:00pm</span>
      </div>
      <p class="mb-1">Json Babel</p>
    </li>
  </ul><!-- /schedule -->

  <!-- callout button -->
  <button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-5" data-toggle="modal" data-target="#modalForm">Don't miss out, register now</button>


    <!-- signup form -->
  <hr>
  <div class="row py-2 text-muted">
    <div class="col-md-6 col-xl-5">
      <p><strong>About Treehouse</strong></p>
      <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
    </div>
  <div class="col-md-6 col-xl-5 offset-xl-2">
    <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Email">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">Sign up</button>
        </span>
      </div>
    </div>
  </div>
  <hr><!-- /signup form -->

  <!--   footer -->

  <div class="row py-3">
    <div class="col-md-7">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Community</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tracks</a>
        </li>
        <li class="nav-item">
  <!-- Split button -->
          <div class="btn-group dropup">
            <button type="button" class="btn btn-secondary">Other confs</button>
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">CSS Conf</a></li>
              <li><a href="#">Python Conf</a></li>
              <li><a href="#">Java Conf</a></li>
              <li><a href="#">Swift Conf </a></li>
            </ul>
          </div>
  <!-- /Split button -->
        </li>
      </ul>
    </div>
    <div class="col-md-5 text-md-right">
      <small>&copy; 2016 Full Stack Conf &amp; Treehouse</small>
    </div>
  </div>

  <!--   /footer -->

                <!-- FORM MODAL! -->

              <div id="modalForm" class="modal fade">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Register for Full Stack Conf</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>Form fields go here.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>

                <!-- /FORM MODAL! -->

  <!--   scripts -->
  <!-- jQuery first, then bootstrap js -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</body>
</html>

Answer 1 · 2017-05-24T14:36:57Z

May 24, 2017 2:36pm

Hello, Thomas! Have a look: at line number 9 and at the end of the code you inserted link to bootstrap.js twice, but didn't add jquery to you code. I removed line number 9, and changed the end of your code so:

</body> </html>

And it works.

Welcome to the Treehouse Community

Looking to learn something new?

Thomas Faller

Thomas Faller

My Links don't get highlighted as a I scroll down

1 Answer

Evgeniia Mas

Evgeniia Mas