Twitter Bootstrap Question posted in

Bootstrap Navbar Dropdown Not Working in Browser, Codepen okay – Twitter bootstrap

I have a document with a navbar whose dropdown menu just won’t work. It works in my codepen, but not through my text-editor(Sublime). I have searched all over for a solution, so here I am.

I have tried:
-Bootstrap Docs
-Making sure jQuery script is before Boostrap script
-Triple checking my closures
-Lots of searching Google and StackOverflow.
-Adding this code:

 <script>
      $("document").ready(function() {
        $(".dropdown").dropdown();
      });
    </script>

Here’s what I believe to be the relevant code. Any insights to my mistake will be greatly appreciated. 

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head
       content must come *after* these tags -->
    <title>JakobiArtWorks</title>
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel = "stylesheet">
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel = "stylesheet">
    <link href = "https://fonts.googleapis.com/css?family=Russo+One" rel = "stylesheet">
    <link href = "style.css" rel = "stylesheet">
</head>

<body>

<header>
    <!--nav-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id = "top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">JAW</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#art">Art</a>
                 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Material
        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#wire">Wire</a>
          <a class="dropdown-item" href="#clay">Clay</a>
          <a class="dropdown-item" href="#plywood">Plywood</a>
          <a class = "dropdown-item" href = "#concrete">Concrete</a>
        </div>
            </li>
      </li>
    </ul>
            <ul class = "nav navbar-nav navbar-right">
                <li><a href = "#">Contact</a></li>
            </ul>
  </div>
</nav>
<!--end nav-->
</header>

...

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src = "script.js"></script>
</body>
</html>
Tags:

2

Answers


  1. 0

    well you have extra </li> after <a class = "dropdown-item" href = "#concrete">Concrete</a> reomove it. and in your script dropdown-toggle should be pointed

    WRONG

      $("document").ready(function() {
    $(".dropdown").dropdown();
  });

    remove "" in document and .dropdown it should be written like this

    CORRECT

     $(document).ready(function() {
    $(".dropdown-toggle").dropdown();
  });

    Demo With your code

    Login or Signup to reply.
  2. 0

    The problem is that you use two different versions of bootstrap of bootstrap. In your header you use the CSS of Bootstrap 4.0.0-alpha.6 and on the end of your body you have the JavaScript of version 3.3.7. You can either use one or the other but not both together.

    This code works for me:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head
         content must come *after* these tags -->
    <title>JakobiArtWorks</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>

<header>
    <!--nav-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">JAW</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#art">Art</a>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Material
                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#wire">Wire</a>
                        <a class="dropdown-item" href="#clay">Clay</a>
                        <a class="dropdown-item" href="#plywood">Plywood</a>
                        <a class="dropdown-item" href="#concrete">Concrete</a>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
    <!--end nav-->
</header>

...

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search