Drop down on navbar is displayed under a second navbar on the same page

Question

In my application I have two navbars on the same page and they wok fine except that if the top navbar has a dropdown it appears under the second second navbar

The top navigator allows the user to select a view of documents while the lower one defines the actions that the user can take in that view. Is there a way to have the dropdown be on top of the second navigator. Here is the code that generates this:

    <!-- first nav -->
    <nav class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle' data-toggle='collapse'
                    data-target='#firstNavbar'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <div class='hidden-sm hidden-md hidden-lg'>
                    <a class="navbar-brand">first</a>
                </div>
            </div><!-- navbar-header -->
            <div class='collapse navbar-collapse' id='firstNavbar'>
                <ul class="nav nav-pills">
                    <li role="presentation">
                        Item One
                    </li>
                    <li role="presentation">
                        Item Two
                    </li>
                    <li role="presentation">
                        Item Three
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" style="background-color:orange"
                            data-toggle="dropdown" href="#">
                            Manager Option
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                        Option One
                    </li>
                    <li role="presentation">
                        Option Two
                    </li>
                    <li role="presentation">
                        Option Three
                    </li>
                    <li role="presentation">
                        Option Four
                    </li>
                    <li role="presentation">
                        Option Five
                    </li>
                        </ul>
                    </li>

                </ul>
            </div><!-- collapse -->
        </div><!-- container -->
    </nav>


<nav class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle' data-toggle='collapse'
                    data-target='#secondNavbar'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <div class='hidden-sm hidden-md hidden-lg'>
                    <a class="navbar-brand">second Nav Bar</a>
                </div>
            </div><!-- navbar-header -->
            <div class='collapse navbar-collapse' id='secondNavbar'>
                <ul class="nav nav-pills">
                    <li role="presentation">
                        Item One
                    </li>
                    <li role="presentation">
                        Item Two
                    </li>
                    <li role="presentation">
                        Item Three
                    </li>
                    <li role="presentation">
                        Item four
                    </li>
                    <li role="presentation">
                        Item five
                    </li>
                    <li role="presentation">
                        Item six
                    </li>

                </ul>
            </div><!-- collapse -->
        </div><!-- container -->
    </nav>

May be this can help, http://stackoverflow.com/questions/12653598/twitter-bootstrap-dropdown-popping-under-elements — Frank van der Linden, Mar 06 '16 at 06:44

score 0 · Answer 1 · answered Mar 07 '16 at 13:35

0

This really is a bootstrap specific question. XPages doesn't truly come into play here. There's good information in the question Frank linked to. Personally I'd try making a class to override the z-index and add that to the bottom navBar. Make the z-index lower then the top one. I'd think that would correct the issue.

answered Mar 07 '16 at 13:35

David Leedy

3,583
18
38

I have tried this but got no where. In my css I created overrides. one called .navbar-view and the other navbar-action. They are identical and are pretty much like the one shown in Frank's link. The only difference between the two is that in .navbar-action I have z-index: -1; and no refference to z-index in navbar-view. navbar-view is the top one. The whole entry is: .navbar-action { background-color: #b3e6b3; color:#336699; border-radius:0; margin-bottom: 1px; margin-top: 1px; z-index: -1; } So from what I have read it would appear that this should work. – Bill F Mar 07 '16 at 15:29
may be you should also add a positive z-index to the .navbar-view – Frank van der Linden Mar 09 '16 at 13:51
Or put !important behind the z-index so you are sure the z-index is not overriden somewhere in the bootstrap css – Frank van der Linden Mar 09 '16 at 13:52

score 0 · Accepted Answer · answered Mar 10 '16 at 16:06

0

Thanks to Frank the solution is to simply add the !important behind the z-index setting in the two classes. Obviously there is something else over-riding the z-index property. In any case works fine now.

answered Mar 10 '16 at 16:06

Bill F

2,057
3
18
39

Drop down on navbar is displayed under a second navbar on the same page

2 Answers2