title: Two DIVs on the same place
body: <p>My "search box and social icons" are hidden behind my main-menu. This is probably because of my .hide-menu class. I have a jQuery plugin that makes the main-menu appear when scrolling-up and makes it disappear when scrolling-down. 
  What I want to achieve is that the "search box and social icons" DIV show always and below the main-menu. Is this possible?</p>
  
  <p>My FIDDLE... <a href="https://jsfiddle.net/rabas007/7f6q75h8/" rel="nofollow">FIDDLE LINK HERE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
   border-top: 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: #A10000;
      font-family: 'LuzSans-Book';
      font-size: 15px;
   font-weight:bold
  }
  
  .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;
  }
  
  
  #search-social {
   margin-bottom:20px
  }
  
  header.site_header {
      box-shadow: 0 1px 6px rgba(0,0,0,.35);
      width: 100%;
      top: 0;
      left: 0;
      position: fixed;
      z-index: 999;
      -webkit-transition: top .5s;
      transition: top .5s;
      background-color: #fff;
  }
  
  header.site_header.hide-menu {
      top: -90px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="site_header root" 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;!-- &lt;div class="clearfix container navbar-fixed-top"&gt; --&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="NAME" src=
                                  "/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;
                                  MENU ITEMS
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;div id="search-social" 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 search_and_social"&gt;
                          &lt;div class="clearfix navbar navbar-custom-search"&gt;
                              SEARCH BOX
                          &lt;/div&gt;
                          &lt;div class="clearfix navbar navbar-custom-social"&gt;
                              SOCIAL ICONS
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>