Bootstrap and expanding menu

Default behavior of bootstrap navbar dropdown is regular dropdown that goes over the content. But what if I want to make it like this website when you click directory:

Collapsed:

Expanded:

You see how div is expanded. Its like bootstrap menu but on mobile view. So I want on my site when I hover over menu item, expand whole header section.

Is that possible in bootstrap?

You can toggle the visibility of any content with Bootstrap Collapse.

For example, if you're navbar had the following link:

<li><a href="#" >Directory <span class="caret"></span></a></li>

You could add data-toggle="collapse" data-target="#demo" like this:

<pre><code>&lt;li&gt;&lt;a href=&quot;#&quot; <b>data-toggle=&quot;collapse&quot; data-target=&quot;#demo&quot;</b>&gt; Directory &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt; </code></pre>

And then include the dropdown menu you want like this:

<div id="demo" class="collapse">
    Expander Stuff
</div>

Demo in fiddle

Collapsed:

Expanded:

Note: I would not implement this on hover because it ignores mobile users. You can easily implement the functionality on click. If you truly want hover, then you'll have to add some extra handling.