1

I've just started learning Boostrap and I'm having a couple of problems with the navigation bar toggle. I've checked up answers from here (like this: Bootstrap 3.0 nav responsive toggle button not working) but I still can't find a solution to what the problem might be.

I'll be glad if someone can help me look into the code and tell me what the problem is. I've linked to the relevant script files (both bootstrap and jquery js files) but I have no with the problem.

here is my code, 

<!--    Nav Bar Starts-->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <a class="navbar-brand text-muted" href="#"> eLeanr</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"> <a href="#"> Home </a>
                </li>
                <li> <a href="#"> About eLeanr</a>
                </li>
                <li> <a href="#"> Contact </a>
                </li>
            </ul>
        </div>
    </div>

</div>
<!--    Nav Bar Ends-->
Community
  • 1
  • 1
Yusuf01
  • 27
  • 3
  • What version of Jquery are you using, and what version of bootstrap.js, plese use the latest – Miomir Dancevic Dec 04 '14 at 08:55
  • I'm using the js file that came with bootstrap 3 download and jquery version 1.11. I don't know, but I believe both js files are stable, or should I be worried about the two files? – Yusuf01 Dec 04 '14 at 09:01
  • There is nothing wrong with this code. In fact, [here it is in action](http://www.bootply.com/render/H5EDbuKcU7), so you must be missing jQuery or Bootstrap library. Where in your code have you defined them and in what order? – DavidG Dec 04 '14 at 09:02
  • here is where I linked the two js files in my code, just before the

    tag `code`

    – Yusuf01 Dec 04 '14 at 09:10
  • And you have the bootstrap js file in the js folder in your solution? Also, perhaps the link should be `/js/bootstrap.min.js` (with the leading slash)? – DavidG Dec 04 '14 at 09:13
  • It might be because you're using the `navbar-collapse` class on the same div where the id is also `navbar-collapse`. You can get rid of the id and just do `data-target=".navbar-collapse"` – Izzy Dec 04 '14 at 09:20
  • yeah, I do have both minified version and the real one in the js folder. sincerely, I don't know what the problem is. I've even copied how the cdn used in bootply (the link you provided) and it didn't work. – Yusuf01 Dec 04 '14 at 09:25
  • Check the console in your browser for errors. – DavidG Dec 04 '14 at 09:25
  • @Izzy I used the class `.navbar-collapse` well ahead of using the id `#navbar-collapse` It taught I should use the id because the class name wasn't working. But the bootply link @DavidG provided worked, still trying to figure out what the problem is – Yusuf01 Dec 04 '14 at 09:30
  • @DavidG yeah, I've just checked for errors, the two js files failed to load. the first one. I got this messaged from the google cdn js file **Failed to load resource: net::ERR_FILE_NOT_FOUND** and this **Uncaught Error: Bootstrap's JavaScript requires jQuery** for the bootstrap js file – Yusuf01 Dec 04 '14 at 09:38
  • and voila... it worked. thanks @DavidG, very appreciative – Yusuf01 Dec 04 '14 at 09:46

0 Answers0