Responsive bootstrap navbar not working

Question

I've been working on a navbar for a site, I've got it sizing down correctly but when it turns into the responsive bar (collapsing the links into the dropdown list) I cant get the collapsible menu to show up. The list button with the 3 bars and my hidden navbar-brand show up but I can't get the menu to drop down. Any ideas?

Code:

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

Answer 1

data-target should point to an id not a class so instead of data-target=".navbar-collapse" , use data-target="#someID" then add an id to the div that will be collapsing, <div class="navbar-collapse collapse" id="someID">

working bootply link

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#someID">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse" id="someID">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div></div>

Answer 2

Are you also loading bootstrap.js or collapse.js + transitions.js? The nav collapse won't work without them, as noted in the docs: http://getbootstrap.com/components/#requires-javascript-plugin

Answer 3

I am allowed to make some changes on your code to get things fixed

<div class="container">
<div class="navbar-default navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
  </div>

Here a jsbin link to it : http://jsbin.com/disasusuri/2/ ps : I am using the last version of bootstrap