Bootstrap Navbar Header Overlaps Content On Small Screens

I have created a bootstrap navbar and on small screens it overlaps the pages content. Is there a way to push the content down when the navbar would overlap it? Preferably it could

Solution 1:

When you use the class navbar-fixed-top the navbar will overlap the content. Remove this and then it'll work as expected

Following from your comment. The reason why you have space between the top and the nav is because you've got padding on the body.. remove this then it will work.

Demo here