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>

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

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


Fixed the collapse animation issue by using min-height instead of height on the nav element. Here is a fiddle:

nav { min-height: 100px; }

Answered By – Richard Mišenčík

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published