CODEWITHSUNDEEP
htmltwitter-bootstrapcssscrollspy
Harish
Harish

Reputation: 1408

Can't figure out why Bootstrap Scrollspy isn't working

I am trying to implement Bootstrap's scroll spy in my website but it isn't working at all! I have tried many things but I can't get it to work. I have a lot of custom CSS being applied to my navbar so I am not sure if that could be effecting anything. Anyways, this is what I have so far:

HTML Code:

Body:

<body id="home" data-spy="scroll" data-target=".navbar" data-offset="0">

Navbar:

<nav id="navbar" class="navbar navbar-lg navbar-fixed-top hidden-xs-down">
    <!-- Navbar content -->
    <ul class="navul">
        <li class="nav-item navitem"><a class="nav-link navhref" href="#home">Home</a></li>
        <li class="navitem"><a class="navhref" href="#about">About</a></li>
        <li class="navitem"><a class="navhref" href="#projects">Projects</a></li>
        <li class="navitem"><a class="navhref" href="#contact">Contact</a></li>
    </ul>
    <h2>Harish</h2>
 </nav>

The about section of my website:

<div class="sections container-fluid">
    <h1 id="about" class="section-heading">About</h1>
    <img class="about-img" src="img/Harish.jpeg" alt="Harish's Picture">
    <p class="paragraph">Text about me.</p>
</div>

CSS Code: (Just in case some of the styling could be interfering with Bootstrap's Scrollspy.)

/*Navbar*/

.navbar {
  background-color: #009Fff;
  color: #fff;
}

.navbar-lg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  padding: 0;
}

.navbar-lg ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  margin-right: auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
}

.navbar-lg ul li {
  margin: 0;
}

.navbar-lg h2 {
  padding: 0;
  vertical-align: center;
  font-family:  'Helvetica Neue', 'Raleway', 'arial', sans-serif;
  font-size: 1.5rem;
  vertical-align: center;
  margin: 1.5rem;
  font-weight: 400;
}

.navul {
  width: 100%;
  display: block;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  list-style-type: none;
  padding-left: 0;
}

.navitem {
  display: block;
  margin: auto;
  padding: 0.75rem;
  text-align: center;
  color: #fff;
  font-family: 'Raleway', 'Helvetica Neue', 'arial', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
}

.navhref {
  color: #fff;
}

.navhref {
  text-decoration: none !important;
}

.navhref:visited {
  color: #fff;
}

.navitem:hover,
.navhref:hover {
  color: #007Bc6;
}

.navlinks {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #009Fff;
}

Upvotes: 0

Views: 812

Answers (1)

Tony Chiboucas
Tony Chiboucas

Reputation: 5683

Your <ul> was missing class="nav"

Both elements have a required classname:

  • <nav class="navbar">
  • <ul class="nav">

Your css is overriding the bootstrap.css, but I think you want a different nav type.

If you take a look at this fiddle: http://jsfiddle.net/n9s3k0ys/2/, you'll note that the nav does not maintain any highlighting as you navigate through the page.

Upon changing the nav class to navbar navbar-inverse navbar-fixed-top, you'll see something closer to what you're going for, but... http://jsfiddle.net/n9s3k0ys/3/

Upon removing your css, everything becomes more clear: http://jsfiddle.net/n9s3k0ys/4/

Upvotes: 5

Related Questions