title: Bootstrap 3 - Is it possible not to collapse navbar, and collapse sidebar to navbar menu?
body: <p>I'm trying to make the navbar not to be collapsed, and collapsing the sidebar to the navbar menu.</p>
  
  <p>Currently this is my navbar:</p>
  
  <p><img src="https://i.stack.imgur.com/XkCMt.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>In mobile mode:</p>
  
  <p><img src="https://i.stack.imgur.com/ld11u.png" alt="enter image description here"></p>
  
  <p>The navbar menu items get collapse into the pull down menu.</p>
  
  <p>Currently, this is my html code:</p>
  
  <pre><code>&lt;!-- Top Navigation Bar --&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;WebStats&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-th"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="{% url 'WebApp:logout'%}"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-left"&gt;
                  &lt;li&gt;&lt;a href="{% url 'WebApp:index'%}"&gt;&lt;span class="glyphicon glyphicon-stats"&gt;&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="#toggleMenu"&gt;&lt;span class="glyphicon glyphicon-indent-left"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;span class="glyphicon glyphicon-th-list"&gt;
                          &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu" data-no-collapse="true"&gt;
                          &lt;li&gt;&lt;a href="{% url 'WebApp:addChart'%}"&gt;Add&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="{% url 'WebApp:editChart'%}"&gt;Edit&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#removeChart"&gt;Remove&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Middle Navigation Area --&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="sidebar"&gt;
                  &lt;ul class="nav nav-sidebar"&gt;
                      &lt;li class="active"&gt;&lt;a href="{% url 'WebApp:index'%}"&gt;&lt;span class="glyphicon glyphicon-dashboard"&gt;&lt;/span&gt; Overview&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-list-alt"&gt;&lt;/span&gt; Reports&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt; Analytics&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Export&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav nav-sidebar"&gt;
                      &lt;li&gt;&lt;a href="#simpleShare"&gt;&lt;span class="glyphicon glyphicon-share"&gt;&lt;/span&gt; SimpleShare&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS Code:</p>
  
  <pre><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 &gt; li &gt; a 
  {
      padding-right: 20px;
      padding-left: 20px;
      position: fixed-top;
  }
  
  .nav-sidebar &gt; .active &gt; a,
  .nav-sidebar &gt; .active &gt; a:hover,
  .nav-sidebar &gt; .active &gt; 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;
  }
  </code></pre>
  
  <p>It seems that the key is within: </p>
  
  <pre><code>&lt;div class="navbar-collapse collapse"&gt;
  </code></pre>
  
  <p>But I have trouble to figure out how.</p>
  
  <p>Edit:</p>
  
  <p>With the collapse removed, the sidebar suddenly increases in right around 250 px</p>
  
  <p><img src="https://i.stack.imgur.com/eRV1D.png" alt="enter image description here"></p>
  
  <p>Edit:</p>
  
  <p>Fixed with:</p>
  
  <pre><code>.nav.navbar-nav &gt; li
  {
      float:left;
  }
  </code></pre>