How can I use the hamburger button for nav tabs in bootstrap?

Question

I am using bootstrap for my responsive website. I have a tabbed content that I want it's nav-tabs to be collapsible with a hamburger button in mobile view, like the tabbed glyphicons in this site. I also attach pictures for more details.
This is my nav-tabs markup code:

<ul class="nav nav-tabs" id="descriptionTab" role="tablist">
    <li class="active" role="presentation">
        <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a>
    </li>
    <li role="presentation">
        <a href="#introduction" role="tab" data-toggle="tab">introduction</a>
    </li>
    <li role="presentation">
        <a href="#access" role="tab" data-toggle="tab">access</a>
    </li>
    <li role="presentation">
        <a href="#times" role="tab" data-toggle="tab">times</a>
    </li>
    <li role="presentation">
        <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a>
    </li>
    <li role="presentation">
        <a href="#warnings" role="tab" data-toggle="tab">warnings</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">                  
    <div class="tab-pane fade active in" id="briefDescription">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="introduction">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="access">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="times">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="ticketPrices">
        <h5></h5>
    </div>
    <div class="tab-pane fade" id="warnings">
        <h5></h5>
    </div>
</div>

I want to use this code of hamburger button like the one that appears as a toggle button when the screen size gets sufficiently small, the ul must then be collapsed by clicking the hamburger button :

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

I want to show these tabs like this screenshot of http://glyphicons.com/ website in mobile view:

mobile view

Thank you @ZimSystem , I've editted my question and posted my code above. — baran.jl

baran.jl baran.jl · Accepted Answer · 2017-02-07T11:31:50

Finally i found the solution. So i write my code here maybe somebody will need it.

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="navbar-collapse collapse" id="descriptionTab">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active" role="presentation">
        <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a>
        </li>
        <li role="presentation">
            <a href="#introduction" role="tab" data-toggle="tab">introduction</a>
        </li>
        <li role="presentation">
            <a href="#access" role="tab" data-toggle="tab">access</a>
        </li>
        <li role="presentation">
            <a href="#times" role="tab" data-toggle="tab">times</a>
        </li>
        <li role="presentation">
            <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a>
        </li>
        <li role="presentation">
            <a href="#warnings" role="tab" data-toggle="tab">warnings</a>
        </li>
    </ul>
</div>

Moreover, i needed to change some css rules, for example:

@media screen and (max-width: 769px){
    .nav-tabs > li{
    display:block;
    width:100%;
    }
}

I hope it will be helpful :)

How can I use the hamburger button for nav tabs in bootstrap?

1 Answers