Bootstrap navbar collapse into 2 hamburger menus

Question

I've been looking and experimenting a lot with bootstrap navbar, but have been unable to get what I am looking for.

On large screens I can make a nice navbar with a lot of content. On a medium screen, I want a part of that content to collapse into a "general menu" and the remainder practically unchanged. On a small screen I want the remainder to collapse into an other hamburger, or search icon so I am left with two collapsable menus in the top bar. I've tried to make a mock-up using images.

Navbar on large display

Navbar on small display

Even better would be if the menus on the small screens would animate from the left, respectively from the right, covering some 70% of the screen width, instead of animating from the top covering 100% width.

Answer 1

DEMO Attached: Well i tried it using hidden-xs or visible-lg or visible-sm classes of the bootstrap, in which few section will be rendered in small devices and few will rendered in large devices, you will have idea about how you can revise your code accordingly.

You can add as many as section and show them according to device using the class as hidden-xs or visible-lg or visible-sm as well check out more in bootstrap official site.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="navbar navbar-default">
        <div class="container-fluid  bg-info">
            <div class="navbar-header">
                <!--Visible on mobile device only-->
                <a class="navbar-brand bg-info visible-xs pull-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title="App Setting">
                    <span class="glyphicon glyphicon-align-justify" style="cursor:default"></span>
                </a>

                <!--Visible on mobile device only-->
              
                    <a class="visible-xs btn navbar-brand pull-right" data-toggle="modal" href="#searchModal">
                        <span class="glyphicon glyphicon-search"></span>
                    </a>
             

                <a class="navbar-brand bg-success"  style="padding-right:5px;padding-left:2px;">
                    <span class="glyphicon glyphicon-home"></span> APP Name
                </a>

      
                 
                


              

                <!--Hidden on mobile device only-->
                    <form action = "" method="get" role="search" class="hidden-xs navbar-form navbar-left">
                        <div class="input-group">
                            <input type = "search" class="form-control" name="id" placeholder="Search..">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div><!-- /input-group -->
                    </form>

              
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                   
                        <li class="dropdown">
                            <a href = "#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-user"></span>
                                Name<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href = "" >
                                        <span class="glyphicon glyAP glyphicon-log-out"></span> Sign out
                                    </a>
                                </li>
                                <li>
                                    <a href = "" ><span class="glyphicon glyphicon-wrench"></span> Change Password</a>
                                    </li>
                            </ul>
                        </li>
                  
                    <li class="dropdown">
                        <a href = "#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-cog"></span>
                            <!--Visible on mobile device only-->
                            <span class="visible-xs-inline-block">Tools</span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href = ""><span class="glyphicon glyphicon-stats"></span> kkk</a></li>
                            <li><a href = "" target="trace"><span class="glyphicon glyphicon-record"></span> dffd</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--Visible on mobile device only-->
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form action = "" method="get" role="search">
            <div class="iput-group input-group-lg" style="margin-top:20px;margin-left:10px;margin-right:10px;">
                <input type = "search" class="form-control" name="id" placeholder="Search.....">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div><!-- /input-group -->
        </form>
    </div>