CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Maximilian Krause
Maximilian Krause

Reputation: 11

Why doesn't my Bootstrap scrollspy work?

I'm new to the Bootstrap world and just tried to make a simple scrollspy.

<!DOCTYPE html>
<html>
<head>
    <title>Team Avero | Home</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/bootstrap.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
    <div class="container">
        <ul class="nav nav-tabs pull-left" id="navbar">
          <li class="active"><a href="#jumbotron">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Social Media</a></li>
        </ul>
        <ul class="nav nav-tabs pull-right">
          <li><a href="#">Avero Store</a></li>
          <li><a href="#">Forums</a></li>
        </ul>
    </div>

<div class="jumbotron">
    <div class="container">
        <h1>Team Avero</h1>
        <p>provides the best tools, services and more in the modding community. Guaranteed.</p>
    </div>
</div>

<div class="news">
    <div class="container">
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
        <p>This is a test.</p>
    </div>
</div>
</body>
</html>

The layout is fine, however when I click on the "News" item in the navigation, it doesn't scroll to the div class news. What's wrong?

Upvotes: 0

Views: 1141

Answers (2)

Dami&#225;n Dlugosch
Dami&#225;n Dlugosch

Reputation: 11

Try to replace 

<ul id="navbar">
  ...
</ul>

to 

<div id="navbar">
  <ul>
    ...
  </ul>
</div>

Upvotes: 0

Ajai
Ajai

Reputation: 901

You have specified <div class="news"> It should be <div id="news"> because you have used #news for the anchor tag.

# refers to id and . refers to class

Upvotes: 3

Related Questions