Menu
So I'm messing around with the new bootstrap V3, and there is absolutely one thing that is driving me insane. There is no space between a fixed top navbar and the item that follows it. I've tried changing the padding on the item(whether it be jumbotron or carousel) and the padding on the navbar to no avail. Its literally driving me insane. any fixes?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand">Gaming</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=
".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Cheats</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-
toggle="dropdown">Forums<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">General</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">eSports</a></li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="container">
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.
<a title="Bootstrap 3" href="http://getbootstrap.com" class="">Bootstrap 3 RC 1
is now available!</a></p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a>
</p></div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names
have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
298
The bootstrap documentation recommends adding top padding to the <body> - equal to the height of your navbar:
The fixed navbar will overlay your other content, unless you add padding to the top of the
<body>
body {
padding-top: 50px; /* Whatever the height of your navbar is; the
default is 50px */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
