Having trouble with fixed navbar not getting parrent width? - twitter-bootstrap-3

Question

I've recently started working with bootstrap and is somewhat a newbie to webdesign as well.
I've been having trouble with my navbar not enheriting the .container-fluid width, which in the end making in non-responsive. I wanted my navbar to be fixed and in "high" z-position, to overlap content. I've been searching far and low on Stack Overflow to find an answer but with no luck. Can some wiz please enlighten me?
I don't have the exact code currently but it look something like:
<div class="container-fluid">
<div class="navbar">
<ul class="nav nav-pills" id="navbar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
CSS
#navbar{
position:fixed;
z-index:999;
background-color: rgba(0,0,0,0.7);
}

Answer 1

There is a CSS Class(navbar-fixed-top) in bootstrap for a fixed navbar.
Change your first <div> to <nav> (nav is a div but it is the HTML5 standard)
Add the navbar-default & navbar-fixed-top to your <nav>
Nest your container-fluid div inside your <nav>...</nav>
Add link tags to your <li> items
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav nav-pills" id="navbar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</nav>
Then you will need to add padding to your body in your CSS file if you dont want the navbar to overlap content:
CSS:
body{
padding-top: 70px;
}
Documentation here
I hope this helps!