I have 2 navbars, A and B, originally, when you shrink the browser to max-width: 767px B sets on top of A, I needed A on top of B, this was answer in my previous question, I choose the css answer but it came with a glitch, when you click the button to show the content of the narvars, A stays on the same place, but B moves below A, which is not the desire functionality.
To make things clearer... I'll show it graphically:
Before clicking the button to show navbar's content
After clicking the button to show the navbar's content
Originally Main Menu was on top of Title, this was changed with the next CSS class:
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
Here's the live demo: click here
I'm open to any solution, including jquery over the css changes of navs.
Here's my custom CSS:
body{
border: solid;
}
.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 ***************/
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
@media (min-width: 1200px) {
}
@media (min-width: 980px) {
}
@media (max-width: 979px) {
}
@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) {
/* BEGIN classes that make Title comes on top of Main Menu */
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
/* END classes that make Title comes on top of Main Menu */
#logo-client {
display:none;
}
}
@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;
}
/*.span2 {
margin:0 auto;
top: 100px;
clear:none;
width:100%;
}
.span10 {
margin:0 auto;
top:0px;
clear:both;
width:100%;
}*/
}
HTML code snippet
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img id="logo-client" 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> <a href="#" class="brand">Main Menu</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li> <a href="#">Home</a>
</li>
<li> <a href="#">Library</a>
</li>
<li> <a href="#">Applications</a>
</li>
<li class="nav-header">Another list header</li>
<li> <a href="#">Profile</a>
</li>
<li> <a href="#">Settings</a>
</li>
<li class="divider"></li>
<li> <a href="#">Help</a>
</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> <a href="#" class="brand">Title</a>
<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> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</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> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</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> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</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> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> <a href="#">Separated link</a>
</li>
<li> <a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li> <a href="#">Link</a>
</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> <a href="#">Action</a>
</li>
<li> <a href="#">Another action</a>
</li>
<li> <a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li> <a href="#">Separated link</a>
</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>
UPDATE
Following Morpheus suggestion, now both navbars behave independent, the main error is still there, here's an update:
Click here to check the lastest example
Thanks in advance!
