Search code examples
csstwitter-bootstrapnavigationnavbar

Bootstrap nav toggle without navbar element

Is it possible to create the toggle button without using all the markup for default navigation?

I just want to create simple menu with the collapse feature. For example:

<div class="navigation">
    <ul id="nav-to-collapse">
       <li><a href=""></a></li>
       <li><a href=""></a></li>
       <li><a href=""></a></li>
    </ul>

    <a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
</div>

Would this be possible? Its my first time using Bootstrap (3) and Its really confusing. I dont want to use all the navbar classes because then I would have to overwrite all the navbar styles just to create simple menu that I want.

EDIT: I managed to create the toggle without all the useless navbar classes but there is an issue with the toggle animation, when nav height is changed. Here is a jsfiddle to ilustrate the problem: Jsfiddle demo

Solution

  • Fixed the collapse animation issue by using min-height instead of height on the nav element. Here is a fiddle: http://jsfiddle.net/cfcZY/2/

    nav { min-height: 100px; }