I’m trying to use Twitter Bootstrap for the first time (first time with frontend too), however I already have problems. One is that the navbar
is always shown over others components.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
In this case for example the div
.container .theme-showcase
is under and I can never see it.
What am I missing? Thank you.
EDIT: removing-fixed-top is not a solution, I need the nav always present
2
Answers
.navbar-fixed-top
will give the navbarposition: fixed
removing it from the flow so other elements will start at the top of the page. If you want a sticky nav, add top padding to.container.theme-showcase
or if you want the navbar static, then simply remove the.navbar-fixed-top
class.Because
.navbar-fixed-top
isposition: fixed
, thenav
element will lay on top of the underlyingdiv
. Be sure to give.container .theme-showcase
somepadding-top
to show it beneath the navbar.