How to move a navbar with Bootstrap? - html

Question

I have two navbar containers on my page.
Originally, navbar1 stays on top of navbar2, but after I shrink the page and the responsive style come to have effect, I need navbar2 to be on top of nabvar1
Here's a link to my demo: click
Here's an example of what I have:
Here's an example of what I need:
Update
CSS Code Snippet
.navbar
{
margin-bottom: 3px;
}
.btn-group
{
float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
.navbar-inner-left
{
padding-right: 0;
padding-left: 0;
}
.navbar-left{}
.navbar-left .nav > li
{
float: none;
}
.navbar-inner-left div > .nav-list
{
padding-left: 0;
}
.navbar-inner-left .container-fluid > .brand
{
padding: 10px 5px 10px 5px;
}
.navbar-inner-left
{
border: none;
background-color: #ffffff;
background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
background-image: -o-linear-gradient(top,#ffffff,#ffffff);
background-image: linear-gradient(to bottom,#ffffff,#ffffff);
border: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
}
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
#media (min-width: 1200px){}
#media (min-width: 980px){}
#media (max-width: 979px){}
#media (max-width: 767px){}
#media (min-width: 768px) and (max-width: 979px)
{
.navbar-left .btn-navbar
{
margin-right: -15px;
}
.navbar-inner-left .container-fluid > .brand
{
float: left;
}
}
#media (max-width: 767px) and (min-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
#media (max-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
HTML Code Snippet
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" />
<div class="navbar navbar-left">
<div class="navbar-inner navbar-inner-left">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Main Menu
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-list">
<li class="nav-header">List header </li>
<li>Home </li>
<li>Library </li>
<li>Applications </li>
<li class="nav-header">Another list header </li>
<li>Profile </li>
<li>Settings </li>
<li class="divider"></li>
<li>Help </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="span10">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Title
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>Link </li>
<li class="divider-vertical"></li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li>Separated link </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button">
<em class="icon-align-left"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-center"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-right"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-justify"></em>
</button>
</div>
</div>
</div>
</div>
Thanks in Advance!

Answer 1

.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
And put that in the media query block you want to swap them in.

Answer 2

Having looked at your code i would use jQuery. I'm on a mobile device and can not access your jsfiddle at the moment. But to move a div from one place to another you would just do this in jQuery
$("#source")
.appendTo("#destination");
EDITED
if ( $(window).width() < 959) {
$("#source")
.appendTo("#destination");
}