Bootstrap Double navbar with dropdown

Question

Right now I have 2 navbars. The upper navbar has a dropdown button, which isn't showing properly.

In the image below I pressed the button "Mijn werk" which is the dropdown. As you can see, there is no dropdown.

http://puu.sh/8KuxS.jpg

If I look at a different page (without the second navbar) you can see the dropdown (see image below again)

http://puu.sh/8KuD5.jpg

I'm using the following code to create the navbars:

    <nav class = "navbar navbar-inverse navbar-static-top" role = "navigation">
        <div class = "container navbar-inner">
            <a href = "index.php" class = "navbar-brand">Wesley</a>

            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
                    <li class = "active"><a href = "index.php">Home</a></li>
                    <li><a href = "about.php">About</a></li>

                    <li class = "dropdown" role = "menu">
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Mijn werk <b class = "caret"></b></a>
                        <ul class = "dropdown-menu">
                            <li><a href = "#">File Browser</a></li> 
                            <li><a href = "#">Gastenboek</a></li>
                        </ul>
                    </li>

                    <li><a href = "#contact" data-toggle = "modal">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <nav class = "navbar navbar-default navbar-static-top" role = "navigation">
        <div class = "container navbar-inner">
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderLoginCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderLoginCollapse">
                <form class = "nav navbar-form navbar-right" id = "login" method = "post" action = "login.php">
                    <div class = "form-group">
                        <input type = "text" class = "form-control" placeholder = "Gebruikersnaam" name = "gebruikersnaam">
                    </div>

                    <div class = "form-group">
                        <input type = "password" class = "form-control" placeholder = "Wachtwoord" name = "wachtwoord">
                    </div>

                    <div class = "form-group"><button type = "submit" class = "btn btn-primary">Aanmelden</button></div>

                    <div class = "form-group"><span class = "navbar-text"><a href = "register.php">Register</a></span></div>
                </form>
            </div>
        </div>
    </nav>

My question: How do I get the dropdownlist on top of the second navbar?

Answer 1

You can give the 2nd navbar an id (ie: "nav2") and then change it's z order like this..

#nav2 {
 z-index:-1;
}

Demo