bootstrap Navbar not working with bootstrap 4.0.0-alpha.2

Question

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

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <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">

    <style type="text/css">

      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;}

    </style>



  </head>
  <body data-scroll="spy" data-target="#myNavbar" data-offset="10">

    <nav  class="navbar navbar-inverse navbar-fixed-top" id="myNavbar">

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>


          <a href="#" class="navbar-brand">WebSiteName</a>

        </div>

        <div class="collapse navbar-collapse" id="myNavbar"> 

          <ul class=" nav navbar-nav" >

            <li class="active"><a href="#home">Home</a></li>

            <li><a href="#one">Section 1</a></li>

            <li class="dropdown"><a  class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2<span class="caret"></span></a>

              <ul class="dropdown-menu" >

                <li><a href="two1">Section 2-1</a></li>

                <li><a href="two2">Section 2-2</a></li>

                <li><a href="two3">Section 2-3</a></li>

              </ul>

            </li>

            <li><a href="#three">Section 3</a></li>

          </ul>
        </div>
      </div>

    </nav>




    <div id="home" class="container-fluid">

      <h1>Home</h1>

      <p>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!</p>
      <p>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!</p>

    </div>


    <div id="one" class="container-fluid">

      <h1>One</h1>

      <p>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!</p>
      <p>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!</p>

    </div>                                                             



    <div id="two" class="container-fluid">

      <h1>two</h1>

      <p>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!</p>
      <p>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!</p>


    </div>



    <div id="three" class="container-fluid">

      <h1>Three</h1>

      <p>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!</p>
      <p>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!</p>


    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script> 

    <script type="text/javascript">

      $("body").scrollspy({target:"#myNavbar"});

    </script>

  </body>
</html>

Bootstrap 4 is very different. Have you read the docs for the new navbar? http://v4-alpha.getbootstrap.com/ — Carol Skelly, Aug 19 '16 at 14:14
Oh Thanks actually I'm new , learning bootstrap and I learnt bootstrap from different site than official which has examples and data about old bootstrap. — Saim Sajid, Aug 21 '16 at 17:15

score 2 · Accepted Answer · answered Aug 19 '16 at 14:49

2

Update the HTML accordingly for the new Bootstrap 4 navbar..

http://codeply.com/go/yPEQsECngS

I ran your 3.x code through this Bootstrap 4 upgrade tool and scrollspy works as expected. Also keep in mind that Bootstrap 4 is currently in ALPHA so it will change.

answered Aug 19 '16 at 14:49

Carol Skelly

351,302
90
710
624

In addition to a general alpha disclaimer, the `.navbar` component in V4 Alpha 3 is full of display issues and bugs. Even migrating to the V4 format; it's not really functional (compared to the V3 component) – Robert Aug 19 '16 at 15:48
Yup thanks it worked after I update it according to new bootstrap.4 – Saim Sajid Aug 21 '16 at 17:17

bootstrap Navbar not working with bootstrap 4.0.0-alpha.2

1 Answers1