CODEWITHSUNDEEP
htmltwitter-bootstrapnavigation
Aleksandar
Aleksandar

Reputation: 511

Bootstrap navigation icon

I coding with bootstrap, and I have responsive left navigation. Looks like:

    <div class="col-md-2">
             <ul class="nav list-group">
                  <li class="blue"><a class="list-group-item" href="#">Link 1</a></li>
                  <li class="reddy"><a class="list-group-item" href="#">Link 2</a></li>
                  <li class="violet"><a class="list-group-item" href="#">Link 3</a></li>
                  <li class="orange"><a class="list-group-item" href="#">Link 4</a></li>
             </ul>
    </div>

How to add click drop down icon on the top, when screen become too small? How can I do this?

Upvotes: 0

Views: 167

Answers (1)

Moz
Moz

Reputation: 117

You can collapse the navigation bar using bootstrap's already built in feature so you dont get on a lot of trouble, you can read the full documentation for nav-bars on this link: http://getbootstrap.com/components/#navbar
And as you can see, you can also modify the width when it collapses.

For your code, here is a quick modified one I made so it collapses:

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#data-to-collapse"> <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="col-md-2 collapse navbar-collapse" id="data-to-collapse">
        <ul class="nav list-group">
            <li class="blue"><a class="list-group-item" href="#">Link 1</a></li>
            <li class="reddy"><a class="list-group-item" href="#">Link 2</a></li>
            <li class="violet"><a class="list-group-item" href="#">Link 3</a></li>
            <li class="orange"><a class="list-group-item" href="#">Link 4</a></li>
        </ul>
    </div>
</div>

Here it is on JSFiddle: http://jsfiddle.net/7nfat3sn/7/

Upvotes: 1

Related Questions