I have the left sidebar with vertical menu built with "nav nav-pills nav-stacked" what I want when the screen size is XS (mobile) this menu changes to suitable dropdown menu and start as closed/collapsed.

Here is my starting code:

The html code here also

<div class="container-fluid">
  <div class="row">

    <div class="col-xs-12 col-sm-3">

        <div class="panel panel-info">
            <div class="panel-heading">Categories <span class="badge pull-right">12345</span></div>
            <ul id="categories-menu" class="nav nav-pills nav-stacked">
                <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
                <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
                <li id="cid-10"><a href="munity">Community</a></li>
                <li id="cid-2"><a href="electronics">Electronics</a></li>
                <li id="cid-11"><a href="events">Events</a></li>
                <li id="cid-12"><a href="fashion">Fashion</a></li>
                <li id="cid-13"><a href="freebies">Freebies</a></li>
            </ul>            
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">Site statistics</div>
            <ul class="list-unstyled">
                <li>1000 Users</li>
                <li>200 Online</li>
                <li>300 Hidden</li>
            </ul>
        </div>

    </div>

    <div class="col-xs-12 col-sm-9">
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
    </div>

  </div>
</div>

I have the left sidebar with vertical menu built with "nav nav-pills nav-stacked" what I want when the screen size is XS (mobile) this menu changes to suitable dropdown menu and start as closed/collapsed.

Here is my starting code:

http://www.bootply./zOy2IJumZO

The html code here also

<div class="container-fluid">
  <div class="row">

    <div class="col-xs-12 col-sm-3">

        <div class="panel panel-info">
            <div class="panel-heading">Categories <span class="badge pull-right">12345</span></div>
            <ul id="categories-menu" class="nav nav-pills nav-stacked">
                <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
                <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
                <li id="cid-10"><a href="munity">Community</a></li>
                <li id="cid-2"><a href="electronics">Electronics</a></li>
                <li id="cid-11"><a href="events">Events</a></li>
                <li id="cid-12"><a href="fashion">Fashion</a></li>
                <li id="cid-13"><a href="freebies">Freebies</a></li>
            </ul>            
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">Site statistics</div>
            <ul class="list-unstyled">
                <li>1000 Users</li>
                <li>200 Online</li>
                <li>300 Hidden</li>
            </ul>
        </div>

    </div>

    <div class="col-xs-12 col-sm-9">
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
    </div>

  </div>
</div>

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Jan 31, 2015 at 17:00 daliaessamdaliaessam 1,66644 gold badges2121 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Wrap your ul with bootstrap collapse class:

<div class="collapse navbar-collapse" id="collapse">  
    <ul id="categories-menu" class="nav nav-pills nav-stacked">
        <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
        <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
        <li id="cid-10"><a href="munity">Community</a></li>
        <li id="cid-2"><a href="electronics">Electronics</a></li>
        <li id="cid-11"><a href="events">Events</a></li>
        <li id="cid-12"><a href="fashion">Fashion</a></li>
        <li id="cid-13"><a href="freebies">Freebies</a></li>
    </ul> 
</div>

Then add data-toggle and data-target to the element you want to toggle the menu. For example badge 12345 in your code:

<span data-toggle="collapse" data-target="#collapse" class="badge pull-right">