25

I had no problem with the responsive navbar in the last version of Bootstrap, but I cannot get version 3 to work. The toggle button appears properly and everything disappears but the brand, but the button does not respond to clicks. (http://getbootstrap.com/components/#navbar-responsive) Any help would be greatly appreciated! Here is the code so far:

<!DOCTYPE html>
<html>
<html lang="en">

    <head>
    <title>Hello World</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <section>   
            <div class="navbar navbar-fixed-top">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href= "#" class="navbar-brand">Brand Name</a>
                <div class="nav-collapse navbar-responsive-collapse collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li class="active "><a href="#">Home</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>   
                </div>  
            </div>
        </section>
haim770
  • 48,394
  • 7
  • 105
  • 133
user2655858
  • 251
  • 1
  • 3
  • 3
  • 2
    I got it to work by changing the data-target from .navbar-responsive-collapse to .nav-collapse. It seems there is no class called navbar-responsive-collapse in the Bootstrap 3 CSS, despite what is written here: http://getbootstrap.com/components/#navbar-responsive . Maybe it is an error on their side, but I could have just flubbed something myself. I am still new to this. In any case, I hope this helps someone else. – user2655858 Aug 06 '13 at 09:16
  • 4
    When you find an answer to your own question it's ok to answer it below and accept the answer... this way the question appears as resolved and it's easier to sift through the answer that worked for your specific issue. – sulfureous Aug 06 '13 at 22:31

7 Answers7

12

I believe the code below will produce the effect you're looking for. Specifically, there is no "navbar-responsive-collapse" class in BS3 (see the "bootstrap.css" file). Beginning with release 3 Twitter Bootstrap is responsive by default, so many of the code flags for responsiveness are now baked into the framework and no longer need to be called explicitly.

Here's a BS3 version of the right-aligned collapsible menu:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav pull-right">
        <li class="active "><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>   
</div>
</div>
Phil Nicholas
  • 3,681
  • 1
  • 19
  • 23
  • Check your code because navbar-ex1-collapse does not exist in the Bootstrap3 css file (bootstrap.css).Remove it from the div tag and replace it in the button tag with navbar-collapse. – skiabox Oct 03 '13 at 19:27
  • 2
    Hey @skiabox before you down-vote you should do a little research. If you look at the official BS3 documentation for Default Navbar you'll see that my code example -- including the "navbar-ex1-collapse" class in the navbar DIV -- is mostly derived from there... including the class: http://getbootstrap.com/components/#navbar-default – Phil Nicholas Oct 03 '13 at 19:52
  • Maybe the author of the document missed that.Check the bootstrap.css file to see that there is no navbar-ex1-collapse class in there.(Please, don't reply again if you don't check this first) – skiabox Oct 04 '13 at 13:03
  • You can also check a working example at the official bootstrap site here: http://getbootstrap.com/examples/jumbotron/ (all browsers allow you to see the source code of a web page) – skiabox Oct 04 '13 at 14:53
  • 9
    Yes, I know very well that the bootstrap.css file does not contain a "navbar-ex1-collapse" CSS class. I don't even need to open it to know that much. The authors of the official Bootstrap site know that, too. It's a custom class used for the dropdown effect, and it's the officially recommended way of doing things in Bootstrap 3...yet you down-vote it because you don't understand. Why can't you just admit "Yeah, I guess I missed that in the official docs, sorry." If the BS3 author are wrong, take it up with them. – Phil Nicholas Oct 04 '13 at 18:29
  • 1
    And here is the official answer (they explain why they used this name):https://github.com/twbs/bootstrap/issues/10948. – skiabox Oct 05 '13 at 21:06
3

Change this: .navbar-responsive-collapse

to this: .navbar-collapse

Original poster solved his own question. Posting a more concise version here as this helped me. PhilNicholas' version did not work.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
KLEW
  • 166
  • 1
  • 7
  • I'm not sure why you mean that it didn't work. Here's the code in a JSFiddle, tested in Firefox 17 and Chrome 30.... http://jsfiddle.net/philnicholas/aWrYv/ Is that not a right-aligned collapsible menu, just like the question was asking for? – Phil Nicholas Oct 03 '13 at 20:01
2

Bootstrap 3 requires jquery.

--> Best practice to put your scripts at the end too.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

user3234300
  • 21
  • 1
1

Twitter bootstrap uses the bundled Collapse jquery plugin to toggle the navigation menu on mobile screen form factors. Your question pertains to a slightly old release of bootstrap but still remains relevant – the toggle can be triggered on an element by setting:

data-toggle="collapse" and data-target="#valid_css_selector_of_target_element".

The catch here is the latter – as far as the functioning of Collapse plugin is concerned it doesn't matter whether you have a predefined bootstrap class .navbar-responsive-collapse, the only thing that matters here is that element exists in your html. The existence of a bootstrap class however would very likely affect how it's styled.

The bootstrap documentation at the time of this writing (and I believe since long) shows, via an example, the use of an id attribute to select the target element; which I find a bit better because there can be more than one elements with the same class on the same page, while Ids are unique in an html document. So, in your case:

<div class="collapse navbar-collapse navbar-ex1-collapse"> would look something like <div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav"> and the toggle button would have an attribute data-target="#my_nav".

lost-and-found
  • 176
  • 6
0

make sure link the bootstrap.cs before bootstrap-responsive.css

<link href="css/bootstrap.css" rel="stylesheet" />  
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

https://stackoverflow.com/a/9626716/2127493

Community
  • 1
  • 1
Azarsa
  • 1,278
  • 3
  • 27
  • 37
0

This worked for me: I changed .navbar-ex1-collapse to .navbar-collapse.

baron5
  • 577
  • 2
  • 11
  • 25
0

I am using Bootstrap 3.2.0. What fixed this problem for me was changing the version of jQuery I was using. Apparently, jQuery 1.7.1 is not compatible with the latest bootstrap. After switching to jQuery 2.0.2, all was well:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Alex W
  • 37,233
  • 13
  • 109
  • 109