title: How to float right menu headers
body: <p>my BOOTPLY... <a href="http://www.bootply.com/zHG4nPE2kV#" rel="nofollow">MY BOOTPLY HERE</a></p>
  
  <p>I need my menu items (car, house, street, boat) to float right at same height level as my logo (for desktop dimensions) and everything else to stay the same as current (including mobile toggle menu behaviour).</p>
  
  <p>Is that possible to achieve?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS used here will be applied after bootstrap.css */
  
  /***** Menu *****/
  .navbar-default .navbar-nav &gt; .active &gt; a,.navbar-default .navbar-nav &gt; .active &gt; a:focus,.navbar-default .navbar-nav &gt; .active &gt; a:hover {
      color: #fff;
  }
  
  .menu-container {
      background-color: #fff;
      border-bottom: 1px solid #000;
      min-height: 20px;
      position: relative;
  }
  
  .navbar-nav a:hover {
      color: #000;
  }
  
  .navbar-nav a:link {
      font-size: 12px;
      font-family: 'century schoolbook';
      color: #000;
      text-decoration: overline;
      text-decoration-color: #A10000;
  }
  
  .brand-name a {
      text-decoration: none;
  }
  
  .brand-name img {
      max-width: 137px;
      padding: 8px;
  /*position:absolute;*/
      left: 0;
  }
  
  ul {
      list-style-type: none;
  }
  
  .navbar-form input,.form-inline input {
      width: auto;
  }
  
  #nav.affix {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10;
  }
  
  #sidebar.affix-top {
      position: static;
  }
  
  #sidebar.affix {
      position: fixed;
      top: 80px;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #000;
      font-family: 'LuzSans-Book';
      font-size: 14px;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a:hover {
      background-color: #A10000;
      color: #000;
   margin-top:4px;
   margin-bottom:4px;
  }
  
  .navbar-default .navbar-nav &gt; .active &gt; a {
      background-color: #000;
   margin-top:4px;
   margin-bottom:4px;
  }
  
  .navbar-custom-social {
      height: 15px;
      float: right;
      clear: none;
      margin-right: 25px;
  }
  
  .navbar-fixed-top {
      padding-top: 0;
  }
  
  .navbar-default .navbar-brand {
      color: #777;
      padding: 0;
      height: inherit;
      float: none;
      display: inline-block;
  }
  
  .navbar {
      margin-bottom: 0;
  }
  
  .navbar-nav {
      margin: 0;
  }
  
  .navbar-default {
      background-color: transparent;
      border: 0;
  }
  
  .navbar-collapse.collapse.in {
      width: 100%;
  }
  
  p.ajaxSearch_intro {
      margin: 0;
  }
  
  .navbar-default .navbar-collapse,.navbar-default .navbar-form {
      padding: 0;
  }
  
  /*toggle btn */
  .navbar-default .navbar-toggle {
      border: 1px solid #000;
      border-radius: 0;
      padding: 5px 10px;
      color: #000;
      background-color: #A10000;
  }
  
  #nav.affix .logo_wrap {
      display: none;
  }
  
  #nav.affix-top .logo_wrap {
      display: block;
      background-image: url(/assets/images/header-background.png);
      background-color: #fff;
  }
  
  #nav.affix .logo_wrap-text {
      display: none;
  }
  
  #nav.affix-top .logo_wrap-text {
      display: block;
      background-image: url(/assets/images/header-background.png);
      background-color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;header id="nav"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div class="navbar navbar-default navbar-static"&gt;
                         
                          &lt;div class="clearfix container navbar-fixed-top"&gt;
                              &lt;div class="clearfix menu-container"&gt;
                                  &lt;div class="pull-right clearfix toggle_btn_wrap"&gt;
                                      &lt;a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="pull-left brand-name"&gt;
                                      &lt;a href="#"&gt;&lt;img alt="***brandlogo***" src="assets/images/logo.png"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                &lt;div class="clearfix prevent-float"&gt;&lt;/div&gt;
                                  &lt;div class="navbar-collapse collapse"&gt;
                                     &lt;ul class="navbar-nav nav"&gt;
                                    &lt;li&gt;
                                      &lt;a href="/car" title="car"&gt;car&lt;/a&gt;
                                       &lt;/li&gt;
                                       &lt;li&gt;
                                      &lt;a href="/house" title="house"&gt;house&lt;/a&gt;
                                       &lt;/li&gt;
                                       &lt;li&gt;
                                      &lt;a href="/street" title="street"&gt;street&lt;/a&gt;
                                       &lt;/li&gt;
                                       &lt;li&gt;
                                      &lt;a href="/boat" title="boat"&gt;boat&lt;/a&gt;
                                       &lt;/li&gt;
    &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>