Keep the navbar width same while scrolling Bootstrap 3 - html

Question

I am using a nav-bar on my page with following code
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
It works fine and just like i want it to except for its width when i scroll.
I want its width to be same as the width of my body tag on that page but when i scroll it adds a little extra width on the right.
Look at the screenshots below for more clear understanding
I tried changing the container class and adding it to <nav class="container"... but that doesn't fix it.

Answer 1

Here is a fiddle showing the navbar never adds width Fiddle
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
And if you want to add width you need to do the following
Your need to add class when you scroll
set your original nav class to have a margin and set it outside of the container and then set your scrolled to to not have the margin
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
Then add
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 1);
});
</script>