top nav bar blocking top content of the page
I have this Twitter Bootstrap code
-
EDIT: This solution is not viable for newer versions of Bootstrap, where the navbar-inverse and navbar-static-top classes are not available.
Using MVC 5, the way I fixed mine, was to simply add my own Site.css, loaded after the others, with the following line:
body{padding: 0}
and I changed the code in the beginning of _Layout.cshtml, to be:
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
@if (User.Identity.IsAuthenticated) {
<div class="top-navbar">
讨论(0)
-
Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
讨论(0)
-
using percentage is much better solution than pixels.
body {
padding-top: 10%; //This works regardless of display size.
}
If needed you can still be explicit by adding different breakpoints as mentioned in another answer by @spajus
讨论(0)
-
The bootstrap v4 starter template css uses:
body {
padding-top: 5rem;
}
讨论(0)
-
with navbar navbar-default everything works fine, but if you are using navbar-fixed-top you have to include custom style body { padding-top: 60px;} otherwise it will block content underneath.
讨论(0)
-
I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
讨论(0)
加载中...
- 热议问题