Multiple navbars on the same page with Twitter's Bootstrap 3

Question

Multiple navbars on the same page dropdowns will overlapped by other navbars, see:

How to prevent this?

Answer 1

Although navbars are meant for singular use you are free to use more as one navbar per page. Multiple navbars on the same page will have the same z-index (1000) so dropdowns may overlap. When using more navbars give each an different z-index (and id). The second z-index should to be lower than the first one, etc.

B.e. with having navbars like: <nav id="navbar1" class="navbar" role="navigation"> <nav id="navbar2" class="navbar" role="navigation"> <nav id="navbar3" class="navbar" role="navigation"> <nav id="navbar4" class="navbar" role="navigation">

set the z-indexes by:

#navbar2 {z-index:999;}
#navbar3 {z-index:998;}
#navbar4 {z-index:997;}