According to the documentation of the Bootstrap 3's navbar static-top,
Static top
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
what does this method do? The above documentation looks like to me that the navbar is fixed at the top of the screen even when I scroll down the page to the bottom. However, it's what .navbar-fixed-top
does, and when I used .navbar-fixed-top
in my app, it works exactly what I've mentioned.
However, when I wrote .navbar-static-top
in my app, I don't know what makes it different from just the .navbar-default
. Anyone can help me in clarifying the difference and what the .navbar-static-top
do?
Best Answer
navbar-static-top
removes the left,right and top border created bynavbar-default
so that it looks better at the top of the page, whereas you might want to use justnavbar-default
elsewhere on the page...navbar-static-top: http://bootply.com/129342
On the other hand,
navbar-fixed-top
usesposition:fixed
. If there is content on the page that extends below the viewport (as there is on most pages) thenavbar-fixed-top
will remain stuck to the top, whereas thenavbar-static-top
will scroll away. Since thenavbar-fixed-top
is fixed, it requires the body to have padding-top so that it doesn't overlay page content...navbar-fixed-top: http://bootply.com/129345
As you can see when you scroll down in each example the top navbar responds differently.