how to make navbar fixed - html

Question

I have done the code for navbar as follows.
<div class="header-bottom ">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo grid">
<div class="grid__item color-3">
<h1><a class="link link--nukun" href="index.html"><i></i><span>PRISM</span></a></h1>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav class="menu menu--horatio">
<ul class="nav navbar-nav menu__list">
<li class="menu__item menu__item--current">Home</li>
<li class="menu__item">About</li>
<li class="menu__item">Short Codes</li>
<li class="menu__item">Gallery</li>
<li class="menu__item">Contact</li>
</ul>
</nav>
</div>
</nav>
</div>
</div>
the output of code is This is output for above code
i want to make only navbar as fixed please help to do so.

Answer 1

Are you using Bootstrap? If so, change
<nav class="navbar navbar-default">
to
<nav class="navbar navbar-default navbar-fixed-top">
Here you have an Example.
If not using bootstrap:
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 1030;
}
Edit:
I missunderstood your question.
You should use affix. And take away the navbar-fixed-top from my previous comment
$('#nav').affix({
offset: {
top: $('header').height()
}
})
where #nav is the nav that you want to get fixed, and .heading is the first nav or heading. So when you scroll the height of the first one, the second one will be fixed.