Bootstrap 3 - Is it possible not to collapse navbar, and collapse sidebar to navbar menu?

Question

I'm trying to make the navbar not to be collapsed, and collapsing the sidebar to the navbar menu.

Currently this is my navbar:

Currently the menu only uses glyphicons, so I thought it would be a good idea in mobile view not to collapse them inside the navbar push open menu.

In mobile mode:

The navbar menu items get collapse into the pull down menu.

Currently, this is my html code:

<!-- Top Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">WebStats</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
                <li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <li><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-stats"></a></li>

                <li><a href="#toggleMenu"><span class="glyphicon glyphicon-indent-left"></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-th-list">
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu" data-no-collapse="true">
                        <li><a href="{% url 'WebApp:addChart'%}">Add</a></li>
                        <li><a href="{% url 'WebApp:editChart'%}">Edit</a></li>
                        <li><a href="#removeChart">Remove</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Middle Navigation Area -->
<div class="container-fluid">
    <div class="row">
        <div class="wrapper">
            <div class="sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-dashboard"></span> Overview</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Reports</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-search"></span> Analytics</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-upload"></span> Export</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li><a href="#simpleShare"><span class="glyphicon glyphicon-share"></span> SimpleShare</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

My CSS Code:

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body 
{
    overflow-y: scroll;
}

/*
 * Global add-ons
 */

.custom-button-length
{
    width: 100px;
}

.sub-header 
{
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

    .navbar-collapse 
    {
        max-height: none!important;
    }

    body 
    {
        margin: 0;
    }

    .navbar-default 
    {
        max-height: none;
    }
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.wrapper 
{
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper.toggled 
{
    padding-left: 250px;
}

.wrapper.toggled .sidebar 
{
    margin-left: -250px;
}

.sidebar 
{
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0px;
    z-index: 1000;
    display: block;
    padding: 20px;
    padding-right: 100px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

@media (max-width: 768px) 
{
    .sidebar 
    {
        margin-left: -250px;
    }
}

/* Sidebar navigation */
.nav-sidebar 
{
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

.nav-sidebar > li > a 
{
    padding-right: 20px;
    padding-left: 20px;
    position: fixed-top;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus 
{
    color: #fff;
    background-color: #428bca;
}


/*
 * Main content
 */

.main 
{
    padding: 20px;
    margin-left: 210px;
    margin-top:50px;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

@media (max-width: 768px) 
{
    .main 
    {
        margin-left: 0px;
        margin-top: -20px;
        padding-top: 20px;
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }
}

.main .page-header 
{
    margin-top: 0;
}

.main.toggled
{
    padding: 20px;
    margin-left: 0px;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

/*
 *  Panels
 */


.panel-body
{
    margin-left: 0px;
    margin-top: 5px;
    padding-top: 20px;
    overflow-y: scroll;
    overflow-x: scroll;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders 
{
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 
{
    margin-bottom: 0;
}
.placeholder 
{
    margin-bottom: 20px;
}
.placeholder img 
{
    display: inline-block;
    border-radius: 50%;
}

.graph-container
{
    box-sizing: border-box;
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.graph-placeholder 
{
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table
{
    border-spacing: 5px;
}

/*
 *  Chart Configuration Modal
 */

#chartConfigModal .modal-dialog
{
    width: 800px;/* your width */
}

.wrapper-config
{
    padding-left: 10px;
    padding-right: 10px;
}

It seems that the key is within:

<div class="navbar-collapse collapse">

But I have trouble to figure out how.

Edit:

With the collapse removed, the sidebar suddenly increases in right around 250 px

Edit:

Fixed with:

.nav.navbar-nav > li
{
    float:left;
}

Answer 1

I solved your navbar issue by removing the navbar-collapse collapse class and removing the collapse button and some css code for the mobile view

HTML

    <!-- Top Navigation Bar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">

                <a class="navbar-brand" href="#">WebStats</a>
            </div>
            <div class="">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
                    <li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
                </ul>
 <ul class="nav navbar-nav navbar-middle visible-xs">
                <li><a href="#"><span class="glyphicon glyphicon-th"></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-home"></a></li>
                <li><a href="{% url 'WebApp:logout'%}"><span class="glyphicon glyphicon-off"></a></li>
            </ul>
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="{% url 'WebApp:index'%}"><span class="glyphicon glyphicon-stats"></a></li>

                    <li><a href="#toggleMenu"><span class="glyphicon glyphicon-indent-left"></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-th-list">
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu" data-no-collapse="true">
                            <li><a href="{% url 'WebApp:addChart'%}">Add</a></li>
                            <li><a href="{% url 'WebApp:editChart'%}">Edit</a></li>
                            <li><a href="#removeChart">Remove</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

CSS in addition to your css

    @media (max-width: 768px) 
    {
    .nav > li
    {
    float:left;
    }
    .nav.navbar-nav.navbar-left
    {
    float:left;
    }
.nav.navbar-nav.navbar-middle
    {
    float:right;
    }
    .nav.navbar-nav.navbar-right
    {
    float:right;
    }
    }

And for the Sidebar just replace the navbar-middle with the Sidebar-content