Problems with the responsive navbar in Bootstrap 3

twitter-bootstrap navbar twitter-bootstrap-3

78,943

Solution 1

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>

Solution 2

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.

Solution 3

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>

Solution 4

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".

View more solutions

78,943

user2655858

Updated on December 11, 2020

Comments

user2655858 over 3 years

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>

user2655858 almost 11 years

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: 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.
sulfureous almost 11 years

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.

skiabox over 10 years

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.
Phil Nicholas over 10 years

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: getbootstrap.com/components/#navbar-default
Phil Nicholas over 10 years

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.... jsfiddle.net/philnicholas/aWrYv Is that not a right-aligned collapsible menu, just like the question was asking for?
skiabox over 10 years

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 over 10 years

You can also check a working example at the official bootstrap site here: getbootstrap.com/examples/jumbotron (all browsers allow you to see the source code of a web page)
Phil Nicholas over 10 years

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.
skiabox over 10 years

And here is the official answer (they explain why they used this name):github.com/twbs/bootstrap/issues/10948.
Ravimallya over 10 years

he is talking about bootstrap 3 where it has combined css.