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

JavaScript

Posted by crisnoel12
crisnoel12
39,853 Points

Help with Bootstrap Scrollspy

Im building a one-page portfolio and im having trouble getting the Scrollspy plugin to work, i've added the data-spy: scroll and data-target attributes in the body, targeting the parent div of my unordered list. Maybe i'm missing something, heres my code:

<body data-spy="scroll" data-target="#main-nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div id="main-nav" class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Cris Noel Web Developer Logo" src="img/CN-Logo.png">
          </a>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT ME</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT ME</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container-fluid container-full">        
        <div id="home" class="row cn-hero">
            <div class="col-md-6 cn-hero-content">
                <h1>CRIS NOEL</h1>
                <h2>WEB DEVELOPER &vert; CAVITE&comma; PHILIPPINES</h2>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-facebook2"></a>
                <span><a href="https://twitter.com/crisnoel12" class="icon-twitter2"></a>
                <span><a href="https://plus.google.com/101421814926873414733/about" class="icon-google-plus2"></a>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-github"></a>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-linkedin"></a></span>
            </div>
        </div>

        <div id="about" class="row cn-about">
            <div class="col-md-4 cn-about-education">
                <h1><span class="icon-books"></span>EDUCATION</h1>
            </div>
            <div class="col-md-4 cn-about-me">
                <h1><span class="icon-profile"></span>ABOUT ME</h1>
                <img src="img/aboutme-pic.jpg" class="profile-pic">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat</p>
            </div>
            <div class="col-md-4 cn-about-skills">
                <h1><span class="icon-embed2"></span>SKILLS</h1>
            </div>
        </div>

3 Answers

Jason Desiderio
Jason Desiderio
21,811 Points

Cris Cancino - I figured out the problem. After pasting this into an html document and inspecting it in chrome, it appears the problem is with your last comment tag 

<!-- END CONTAINER-FULL -- >

Since there is a space on the closing tag -- > instead of -->, it is commenting out all of the tags below which includes the scripts and the closing body and html tags. Get rid of the space as shown below and it all should work perfectly!

<!-- END CONTAINER-FULL -->
crisnoel12
crisnoel12
39,853 Points

Oh yea, that did the trick haha thanks man!

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

HI,

U need id in nav bar #main-nav.

Jason Desiderio
Jason Desiderio
21,811 Points
Jason Desiderio
Jason Desiderio
21,811 Points

Cris Cancino - It appears you have all the classes, IDs and attributes in the right place. What is the css that you have on your body tag? This is from the scrollspy documentation:

"No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied."

Also how are you including the JavaScript file in this document?

crisnoel12
crisnoel12
39,853 Points

Heres the full html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRIS NOEL | WEB DEVELOPER</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body data-spy="scroll" data-target="#main-nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div id="main-nav" class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Cris Noel Web Developer Logo" src="img/CN-Logo.png">
          </a>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT ME</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT ME</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container-fluid container-full">        
        <div id="home" class="row cn-hero">
            <div class="col-md-6 cn-hero-content">
                <h1>CRIS NOEL</h1>
                <h2>WEB DEVELOPER &vert; CAVITE&comma; PHILIPPINES</h2>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-facebook2"></a>
                <span><a href="https://twitter.com/crisnoel12" class="icon-twitter2"></a>
                <span><a href="https://plus.google.com/101421814926873414733/about" class="icon-google-plus2"></a>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-github"></a>
                <span><a href="https://www.facebook.com/CrisNCancino" class="icon-linkedin"></a></span>
            </div>
        </div>

        <div id="about" class="row cn-about">
            <div class="col-md-4 cn-about-education">
                <h1><span class="icon-books"></span>EDUCATION</h1>
            </div>
            <div class="col-md-4 cn-about-me">
                <h1><span class="icon-profile"></span>ABOUT ME</h1>
                <img src="img/aboutme-pic.jpg" class="profile-pic">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat</p>
            </div>
            <div class="col-md-4 cn-about-skills">
                <h1><span class="icon-embed2"></span>SKILLS</h1>
            </div>
        </div>

    </div><!-- END CONTAINER-FULL -- >

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="js/script.min.js"></script>
    <script src="//localhost:35729/livereload.js"></script>
</body>
</html>

and the css for the body:

html,body {
    height:100%;
}

body{ 
    position: relative;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    margin: 0;
}