5

The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.

Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear

Was wondering if anyone knew how to fix it.

Here is my code for the header :

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#">CHRONOS LOGO</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="divider"></li>
                        <li><a href="#">Google+</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Facebook</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Twitter</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

FOOTER:

                    <button type="submit" name="submit" id="submit"
                            class="btn btn-primary btn-lg">
                        Submit
                    </button>
                </form>
            </div>
            <?php } ?>
        </div>
        <div id="footer">
            <div class="container">
                <p class="text-muted">Place sticky footer content here.</p>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="regform/js/jquery.validate.js"></script>
        <script src="regform/script.js"></script>
        <script>
            addEventListener('load', prettyPrint, false);
            $(document).ready(function() {
                $('pre').addClass('prettyprint linenums');
            });
        </script>
    </body>
</html>
KyleMit
  • 35,223
  • 60
  • 418
  • 600
John_Nil
  • 165
  • 2
  • 3
  • 17

2 Answers2

4

You have the wrong value on the data-target attribute; it should instead be:

<button 
    type="button" 
    class="navbar-toggle" 
    data-toggle="collapse" 
    data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>

http://jsfiddle.net/fZTgH/1/

Natsu
  • 1,935
  • 15
  • 11
  • It doesn't work in version 3.3.2. I had to back to bootstrap version 3.1.1 and it worked fine. – Alan Feb 24 '15 at 13:58
1

This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).

<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>

For a further inspection, please update your question with the header code or a link to the site