how add collapse feature to an existing responsive menu?

I have this menu and it works fine , but I want on mobile screen it showed 3 line and hide and open when I click it . how can I add this feature to a menu ? like this image

menu :

http://www.bootply.com/7mGFGPnf43

Solution

You would need to add the navbar-collapse class and a button to the navbar-header div.

The following will add the burger icon when the screen shrinks. This gets added to the navbar-header.

    <div class="navbar-header">
        <a class="navbar-brand " href="#">MyCompany</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
    </button>
    </div>

And the following will be added to the empty div that contains the ul for your menu options:

<div class="collapse navbar-collapse" id="myNavbar">

Altogether this is the final code which will collapse the navbar on smaller devices.

<nav style="margin-bottom:0px;border-radius:0px;border-color:white;font-size:medium;" class="navbar navbar-inverse ">
        <div class="container-fluid ">
            <div class="navbar-header">
                <a class="navbar-brand " href="#">MyCompany</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right text-center ">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> SignUp</a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right text-center">
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">other product <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">menu1</a></li>
                            <li class="text-center "><a href="#">menu2</a></li>
                            <li class="text-center "><a href="#">menu3</a></li>
                             <li class="text-center "><a href="#">menu4</a></li>
                             <li class="text-center "><a href="#">menu5</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle a" data-toggle="dropdown" href="#">Product1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                           <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Women <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>http://www.bootply.com/run#
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Men <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                             <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                            <li class="text-center "><a href="#">submenu4</a></li>
                             <li class="text-center "><a href="#">submenu5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">HomePage</a></li>
                </ul>

            </div>
        </div>
    </nav>