twitter bootstrap navbar fixed top overlapping site

Question

I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it

Answer 1

As others have stated adding a padding-top to body works great. But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.

This solved these kinds of issues for me

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)