Custom responsive CSS menu using Bootstrap - html

Question

I have created this menu for my needs. It is responsive, since I'm using bootstrap, and it is custom, because i needed 2 rows for the right side of the menu. What I need is, how can I have toggle-navigation for lower resolutions than 768x1280? This is how the menu is created:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="row col-xs-4">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></li>
</ul>
</div>
<div class="row col-xs-8" >
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li> </li>
</ul>
</div>
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

I think that following example is ok for your needes:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu2">
<span class="sr-only">Toggle navigation2</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li><img src="img/logo.png"></li>
</div>
<div class="row col-xs-8 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu1">
<ul class="nav navbar-nav">
<li> </li>
<li> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row col-xs-12 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu2">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

Answer 2

You should add button like this where headerCol is id of your div which contains elements you want to collapse. I'm sorry for my bad english. I'll give you example:
This is my header navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">MYSITE</a>
</div>
<div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
{% block headernav %}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About us</li>
<li>Questions</li>
<li>Contacts</li>
</ul>
{% endblock %}
</div><!-- end nav-collapse -->
</div>
</div>