title: bootstrap Navbar not working with bootstrap 4.0.0-alpha.2
body: <p>bootstrap Navbar not working with bootstrap 4.0.0-alpha.2 and also scroll spy.I tried to replace both script and css file with bootstrap 3.3.7 which work fine but with this version both styling of navbar and also spy scrolling not working</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt; 
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
  
      &lt;style type="text/css"&gt;
  
        body{
  
          position:relative;
  
        }
  
        #home{
  
          margin-top:50px;
  
        }
  
        #home {padding-top:50px;height:500px;color: #fff; background-color: green;}
        #one {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
        #two {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
        #three {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
        #two1 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
        #two2 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
  
      &lt;/style&gt;
  
  
  
    &lt;/head&gt;
    &lt;body data-scroll="spy" data-target="#myNavbar" data-offset="10"&gt;
  
      &lt;nav  class="navbar navbar-inverse navbar-fixed-top" id="myNavbar"&gt;
  
        &lt;div class="container-fluid"&gt;
  
          &lt;div class="navbar-header"&gt;
  
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
  
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
            &lt;/button&gt;
  
  
            &lt;a href="#" class="navbar-brand"&gt;WebSiteName&lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt; 
  
            &lt;ul class=" nav navbar-nav" &gt;
  
              &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#one"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="dropdown"&gt;&lt;a  class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Section 2&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                &lt;ul class="dropdown-menu" &gt;
  
                  &lt;li&gt;&lt;a href="two1"&gt;Section 2-1&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="two2"&gt;Section 2-2&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="two3"&gt;Section 2-3&lt;/a&gt;&lt;/li&gt;
  
                &lt;/ul&gt;
  
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#three"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/nav&gt;
  
  
  
  
      &lt;div id="home" class="container-fluid"&gt;
  
        &lt;h1&gt;Home&lt;/h1&gt;
  
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="one" class="container-fluid"&gt;
  
        &lt;h1&gt;One&lt;/h1&gt;
  
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
  
      &lt;/div&gt;                                                             
  
  
  
      &lt;div id="two" class="container-fluid"&gt;
  
        &lt;h1&gt;two&lt;/h1&gt;
  
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
  
  
      &lt;/div&gt;
  
  
  
      &lt;div id="three" class="container-fluid"&gt;
  
        &lt;h1&gt;Three&lt;/h1&gt;
  
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
        &lt;p&gt;Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!&lt;/p&gt;
  
  
      &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js" &gt;&lt;/script&gt;
  
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"&gt;&lt;/script&gt; 
  
      &lt;script type="text/javascript"&gt;
  
        $("body").scrollspy({target:"#myNavbar"});
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>