Affix menu on top permanently (without disappearing for a sec) - html

Question

I am trying to affix menu nav bar on top fixed, but somehow the bar layout and "social icons" and "search box" I have get all messed up. I tried changing line 7 from relative to fixed position, but no luck.
Basically what I have now is the menu is on top, when you scroll down, the menu disappears for a while and then pops up again to stay affixed on top when scrolling down. No clue why the menu disappears for a sec when scrolling down to come back, but basically now I want the menu nav bar fixed on top permanently and not disappear for a sec when scrolling down. And ofcourse the current layout / width and all to stay in tact. Is it possible to achieve this somehow?
My BOOTPLY::: BOOTPLY
/* CSS used here will be applied after bootstrap.css */
.menu-container {
background-color:#000;
border-bottom:4px dashed #FFBB3A;
min-height:20px;
position:relative;
}
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<h1>MENU</h1>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
</div>
</div>
<div class="clearfix search_and_social">
<div class="clearfix navbar navbar-custom-search">
search box
</div>
<div class="clearfix navbar navbar-custom-social">
social icons
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>

Answer 1

It looks like you're using the Bootstrap Affix Plugin and don't have it configured properly or it is doing something a little different from what you expected. The Affix plugin is setup to trigger a "sticky" header after scrolling some distance or to some element.
This will get you what is going on in this Bootstrap example.
Solution
Remove/disable Affix plugin.
Add .navbar-fixed-top to your #nav element. Then add padding-top to the body element that is equal to the height of your #nav element, which is currently 181px.