Two DIVs on the same place
<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>