Bootstrap 3 navbar-fixed-top stay fixed in mobile view

Question

This may be a bug or just my bad coding. I've built a website using twitter bootstrap 2.3.* and found no problem, especially for the responsive function. The problem came up when I tried to switch into bootstrap 3.RC-2 which was latest stable release (according to Wikipedia). I have also tried with the examples contained in the download, and had the same result when I tried to resize the viewport.

Please have a look at http://bootply.com/69863 for the example, and try to resize window browser then click render view, and try to expand menu and scroll the page.

My real question is how do I make the fixed navbar static when in mobile (collapsible) view?

Answer 1

Additionally to what Bass Jobsen has mentioned, for a better usability on mobile, the following CSS snippet removes the "sub-scrolling" on the navigation bar and removes the top margin which is there due to the large screen fixed navbar:

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}

Answer 2

.navbar-fixed-top keeps the navbar fixed top for all screen sizes now. This will be the default. When you take a look at navbar.less you will see no media queries are applied on this class too.

To make the navbar static after the collapse add the css shown below after the Boostrap CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}