twitter bootstrap navbar fixed top overlapping site
Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!
a much more handy solution for your reference, it works perfect in all of my projects:
change your first line from
.navbar.navbar-fixed-top
to
.navbar.navbar-default.navbar-static-top
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)
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.body { padding-top: 70px; }Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.