How to move a navbar with Bootstrap?

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: enter image description here

Here's an example of what I need: enter image description here

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><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>

Thanks in Advance!

[This question may be of use](http://stackoverflow.com/questions/12933356/change-div-order-on-responsive-design). — Xareyo, May 17 '13 at 20:20
@Vector code snippets are added, but they are kinda long, there is a demo on jsfiddle is you want to see it live... — Luis, May 17 '13 at 20:30
@YaMo I'm trying to implement that approach and see if it works, I would have preffer a `css` solution, but I think its gonna be complicated, thx — Luis, May 17 '13 at 20:32
@YaMo using that approach I would have to set up the `top` of the containers in an static way. Maybe the `js` solution could be better... — Luis, May 17 '13 at 20:54

Kevin Lynch · Answer 1 · 2013-05-17T20:51:53.977

1

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");
}

edited May 17 '13 at 20:51

answered May 17 '13 at 20:43

Kevin Lynch

24,427
3
36
37

And how can I implement that only when width of the page is < 959px? – Luis May 17 '13 at 20:48
I'm looking to your answer cause the `css` is giving me a lot of trouble, when I use your jquery solution, it works fine below `959px`, but when you are above that `width`, it all gets messy, if you have the time, you can [check this behavior here](http://jsfiddle.net/luissanchezm86/2ucL3/8/). Thanks in advance – Luis May 23 '13 at 14:32

score 1 · Accepted Answer · answered May 17 '13 at 21:48

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.

answered May 17 '13 at 21:48

Robert McKee

21,305
1
43
57

I'm gonna make a new question about the but i'm having with this solution, it solves the problem in a way, but it creates another. – Luis May 20 '13 at 14:12
I'm sure it can be done with some nice CSS, however, you may want to consider having two instances of the title menu, with the main menu between them. Apply the visible-phone class to one, and hidden-phone class to the other. It will make the page size larger, but it is definitely the simplest to implement. – Robert McKee May 20 '13 at 16:47

How to move a navbar with Bootstrap?

2 Answers2

Linked