Bootstrap - Responsywne Menu - Mobilne menu

Question

Witam!

Oto kod html:

<nav>

<div  id="menu" class="navbar navbar-default" style=" background-color:green; color: black;">

<div class="conteiner-fluid">

<div class="navbar-header" style="margin-top:-5px;">
<button style="margin-top:12px;"  type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="agritek-foto-ksero-pieczatki"><span style="font-weight:bold; color:black;"><img src="img/logo.jpg" width="35px" height="35px"/> Agritek</span></a>

</div>


<div class="collapse navbar-collapse" id="mynavbar-content">

<div class="nav navbar-nav">



						<li id="link">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:54px; margin:10px; font-weight:bold;">Home</a>		
						<a class="home" href="agritek-foto-ksero-pieczatki""><span class="rrr"><p style="text-align:center; color:white; line-height:60px; font-size:22px;"><span class="glyphicon glyphicon-home"></span></p></span></a>
						</div>
						</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

						<div class="overlayTnav">
						<span class="link15" style="color:black; margin:10px; line-height:23px;">O Nas</span><b class="caret" style="color:red;"></b>		
						<span class="rrr"><p style="text-align:center; color:white; margin:-6px;"><img src="img/grafika33.png" width="37px;" height="37px;"/> <b class="caret" style="color:red;"></b></p></span>
						</div></a>

<ul class="dropdown-menu  lista1" style="text-align:center;">



<li id="link0" ><a href="#">Info</a></li>
<li id="link11"><a href="#">Opinie</a></li>
<li id="link12"><a href="#">Ankieta</a></li>
<li id="link13"><a href="#">Kontakt</a></li>


</ul>
</li>

						<li id="link1">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Foto</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:50px;"><img src="img/grafika34.jpg" width="px;" height="30px;"/></p></span></a>
						</div>
						</li>

						<li id="link2">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Ksero</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:55px;"><img src="img/grafika4.png" width="40px;" height="40px;"/></p></span></a>
						</div>
						</li>

						<li id="link3">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Pieczątki</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:50px;"><img src="img/grafika12.png" width="45px;" height="45px;"/></p></span></a>
						</div>
						</li>

						<li id="link4">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Bindowanie</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:57px;"><img src="img/grafika5.png" width="40px;" height="30px;"/></p></span></a>
						</div>
						</li>
						
						<li id="link5">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Laminowanie</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:55px;"><img src="img/grafika6.png" width="50px;" height="35px;"/></p></span></a>
						</div>
						</li>
						
						<li id="link6">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Reklama</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:50px;"><img src="img/grafika7.png" width="40px;" height="40px;"/></p></span></a>
						</div>
						</li>




<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

						<div class="overlayTnav">
						<span class="link14" style="color:black; margin:10px; line-height:20px;">Nadruki</span><b class="caret" style="color:red;"></b>		
						<span class="rrr"><p style="text-align:center; color:white; margin:-8px;"><img src="img/grafika8.png" width="38px;" height="38px;"/> <b class="caret" style="color:red;"></b></p></span>
						</div></a>

<ul class="dropdown-menu lista1" style="text-align:center;">

<li id="link8"><a href="#">Nadruki na płytach CD i DVD</a></li>
<li id="link7"><a href="#">Nadruki na odzieży</a></li>
						
</ul>
</li>

						<li id="link9">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Wizytówki</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:46px; margin-left:10px;"><img src="img/grafika11.png" width="54px;" height="40px;"/></p></span></a>
						</div>
						</li>
						
						<li id="link10">
						<div class="overlayTnav">
						<a href="#" style="color:black; line-height:52px; margin:10px;">Kopia VHS na DVD</a>		
						<a href="#"><span class="rrr"><p style="text-align:center; color:white; line-height:50px;"><img src="img/grafika10.png" width="50px;" height="35px;"/></p></span></a>
						</div>
						</li>


</div>

</div>

</div>

</div>

</nav>

Chodzi o to ,żeby :

 

 

Gdzie w Bootstrapie ustawić od jakieś szerokości okna,menu ma zmieniać wygląd na "mobilny z przyciskiem rozwijanym" Pozdrawiam np, min width 800px; 

Answer 1

http://getbootstrap.com/customize/#media-queries-breakpoints