Navbar collapse not expanding with dropdown after clicking on it

Question

So, I have just started using Bootstrap 3, and I want my header to be fixed at the top, content in it vertically aligned with the content in body, and lastly, responsive.

Everything works fine except that clicking on collapsed navbar doesn't seem to work. Clicking on those small icon with three bars one over other doesn't show me my list below.

I know this could be a very basic mistake but clicking on this kid right here, doesn't work:

I think I might be doing something wrong with classes in my header.

This is my code:

<header class="navbar  navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand" href="#">Logo Text</a>
  </div>

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav navbar-right">
      <li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li> <a href="#" > My Account </a> </li><br>
          <li> <a href="#"> Logout </a> </li>
        </ul>
      </li>
    </ul>
  </nav>
  </div>
</div>
</header>

The only thing I have in my custom css is:

@media (min-width: 980px){
    body{
        padding-top: 70px;
    }
}

but I don't think that would be causing this problem.

The things I have included before my header in my html are:

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">

which are all in my local directory.

Searching for "collapse not working"/"collapse click not working" shows me bunch of results which seem to be related to the problem of this icon itself not showing up.

Including collapse.js that came with bootstrap didn't fix this problem either.

Answer 1

For others who will get here from a web search:

I had this same problem - not being able to expand a navbar - but all of my code was fine. If you've checked your data-toggle per @Bass Jobsen's answer, and are still having issues then check your CDN.

My problem was that I had a network-level ad blocker that was blocking some of my CDN'ed scripts.

Facepalm.