0

I am creating a nav bar using the bootstrap dropdown feature.https://getbootstrap.com/docs/4.0/components/dropdowns/ Each button in the navbar shows the same information in the dropdown menu. Example: The exercises button shows assignments and the assignment button shows assignments as well.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Assignments
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
                    <a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
                </div>
            <!--Exercise dropdown info-->
            
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Exercises
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
                    <a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE03: Using Forms and  $_POST <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
                    <a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
                </div> 


  </body>
</html>

1
  • 3
    IDs must be unique
    – j08691
    Feb 8, 2019 at 18:29

1 Answer 1

-1

You have given same id to both dropdown menu , change it

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

   <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Assignments
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/home/home.php">Assignment 1: PHP Page</a>
                    <a class="dropdown-item" href="#">Assignment 2: My SQL Form <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">Assignment 3: JavaScript Validation/code <i>(Coming Soon)</i></a>
                    
  </div>
</div>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Exercises
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
 
   <a class="dropdown-item" href="http://ec2-3-17-178-150.us-east-2.compute.amazonaws.com/HelloWorld.php">CE01: Hello World<i>Coming Soon</i></a>
                    <a class="dropdown-item" href="#">CE02: Days of the Week <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE03: Using Forms and  $_POST <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE04: Story Idea Generator <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE05: Workbench Setup <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE06: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE07: Forum Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE08: Monster Manager <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE09: Adding and removing from Database <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE010: JavaScript Objects <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE011: JS Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE012: Session Control <i>(Coming Soon)</i></a>
                    <a class="dropdown-item" href="#">CE013: Login<i>(Coming Soon) </i></a>
                    <a class="dropdown-item" href="#">CE014: Shopping Cart <i>(Coming Soon)</i></a>
  </div>
</div>



  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.