使用Twitter Bootstrap 3修复了导航栏

Question

I'm using Twitter Bootstrap 3 for my website. I'd like to have a fixed navigation bar which needs to be on after some certain point where the user scrolls down.

I've used Affix() and i can get the navigation bar to appeared at some certain point.

But the challenge is when the user scrolls down, the navigation bar appears on the top and the width of the navigation bar is not 100%.

I wanted the width of the navigation bar to be 100% even after scrolling the page.

Here's the FIDDLE .

Please scroll down in the result segment and notice navigation bar.

It disappears and then appears at some scroll point. But the width of the navigation bar is not the same when it was at the beginning.

Please help me in fixing it.

Answer 1

Just use width: 100%; on .navigation

.navigation {
    background: #fff;
    position: relative;
    width: 100%;
}

Demo