1

I've been trying to utilize Bootstrap 4 ScrollSpy to change my active links when scrolling, but I can't seem to get it to work.

I am using a customized Bootstrap 4 where I have removed all common CSS components, components and jQuery plugins linked to components (ScrollSpy is still included).

I'd also love to know how to select a custom color to apply to the nav-links when I do finally get ScrollSpy to work!

Any help would be great, I've really been pulling my hair out over this.

This is my navbar HTML:

 $('body').scrollspy({ target: '#navbar' });
    body {
 margin: 0;
 padding: 0;
 width: 1440px;
 font-family: 'Montserrat', sans-serif;
 position: relative;
    }

    .nav-bar {
 margin-left: 485px;
 background-color: transparent;
 margin-top: 20px;
 position: fixed;
 z-index: 99;

    }

    .nav-link {
 text-decoration: none;
 padding-left: 20px;
 color: yellow;
 display: block;

    }

    .nav-bar ul li {
 list-style: none;
 display: inline-block;
    }


    .nav-link:hover {
 color: orange;
    }
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 
  <body data-spy="scroll" data-target="#navbar" data-offset="30">
 <header>
  <nav class="navbar nav-bar" id="navbar" role="navigation">
  <ul class="nav navbar-nav">

   <li><a id="profileNav" href="#profileSection" class="nav-link 
        link1">Profile</a></li>

   <li><a id="educationNav" href="#experienceSection" class="nav-link 
        link2">Education</a></li>

   <li><a id="projectsNav" href="#projectsSection" class="nav-link 
        link3">Projects</a></li>

   <li><a id="contactNav" href="#contactSection" class="nav-link 
        link4">Contact</a></li>

  </ul>
  </nav>
piet.t
  • 11,718
  • 21
  • 43
  • 52
MLRobinson1993
  • 21
  • 3
  • see here:https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_scrollspy2&stacked=h – לבני מלכה Aug 02 '18 at 08:08
  • If you still have issues after referring this link https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_scrollspy2&stacked=h please refer this link https://stackoverflow.com/questions/9288482/how-do-i-set-the-offset-for-scrollspy-in-bootstrap/12606867 to adjust offset according to your nav position on your page and section height to be scrolled. – Cryptex Technologies Aug 02 '18 at 08:55
  • 1
    Post a complete example of the problem that reproduces the issue. The nav should be fixed position. Refer to the Bootstrap documentation getbootstrap.com/docs/4.1/components/scrollspy, not w3schools which is an unreliable source. Also it shouldn't be initialized twice. Use jQuery .scrollspy OR the data-attributes in the body, but not both. – Carol Skelly Aug 02 '18 at 10:36

0 Answers0