Two Bootstrap nav menus at the same time

javascript css twitter-bootstrap less collapse
amy picture amy · Jun 3, 2012 · Viewed 15.9k times · Source

I like to know if its possible to have two nav's at the same time.

Here is a JSFiddle with the bootstrap test with only the collapse JavaScript for the navbar. Both menus get expanded at the same time, is there a way to prevent that?

Answer

Andres Ilich picture Andres Ilich · Jun 3, 2012

You can, all you have to do is differentiate the data-target attribute with a unique class or id for your dropdown menus like so:

For your first dropdown

<a class="btn btn-navbar" data-toggle="collapse" data-target="#first">

For your second dropdown:

<a class="btn btn-navbar" data-toggle="collapse" data-target="#second">

Then you can add that unique id to your nav collapse container:

First

<div id="first" class="nav-collapse"> ... </div>

Second

<div id="second" class="nav-collapse"> ... </div>

Demo: http://jsfiddle.net/F2tYu/3/

Related questions

Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this …

Read More
Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable. Here's what …

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More