0

Web page is functioning properly but when I change the size of it(make smaller) and click on the button it does not collapsing.Below is my code.

 <!DOCTYPE html> <html> <head> <title>Template 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">zdfgdfgf</a> <a class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class = "collapse navbar-collapse navHeaderCollapse"> <ul class = "nav navbar-nav navbar-right"> <li class="active"><a href = "#">Home</a></li> <li><a href = "#">Social media</a></li> <li><a href = "#">About</a></li> <li><a href = "#">Contact</a></li> </ul> </div> </div> </div> <script src="js/bootstrap.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

can anyone help with this??

this happened after fixing the collapsing problem using the 1st answer

Improve this question

1 Answer 1

Reset to default
1

One problem is that bootstrap.js must be loaded after jquery, like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/bootstrap.js"></script>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

that fixed the collapsing problem.but now it is collapsing as in the picture above..I need to collapse it from the next line.that means the Home link should come to the next line.
Here is a jsfiddle (assuming bootstrap 3) Example

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.