Can't figure it out why my navbar isn't collapsing properly

Question

I'm trying to create a navbar with a right section for the user to login. I can't figure it out why the collapsing isn't working properly. Depending on the screen size my left part and my right part come on top of each other instead of collapsing. Here's the code:

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav">
            <li>
                <a href="/IgrejaVidaPlena/">Home</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Igreja<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/IgrejaVidaPlena/church/about">Sobre nós</a>
                    </li>
                    <li><a href="/IgrejaVidaPlena/church/shepherd">Pastores</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/ministry">Ministérios</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/mission">Missões</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/cult">Cultos</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/PrayerRequest">Pedidos de Oração</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/shepherdReflection">Palavra do pastor</a>
            </li>
            <li>
                <a href="/IgrejaVidaPlena/photoAlbum">Fotos</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 0 !important">
            <li>
                <a href="/IgrejaVidaPlena/church/login">Login</a>
            </li>
        </ul>
    </div>
</div>

You can check it "working" in this jsfiddle

I don't see the issue. What do you mean by left part and right part coming on top of each other? It seems like it's working correctly. — alex, Feb 22 '15 at 18:51

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

Add a media query:

@media (max-width: 990px) {
    ...
}

More info here.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 22 '15 at 19:44

fructurj

104
1
10

Can't figure it out why my navbar isn't collapsing properly

1 Answers1