Reputation: 2129
Can someone help me with that issue? why my sidebar and content is under my navbar? I tried remove class and make some changes and I have no success.
sidebar and content should be under navbar no?
I know I can create that class insert in the row and fix my problem, but I am trying the solution without create any css or extra class.
.margin-top100{
margin-top:100px;
}
html:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
project
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right text-center">
<li><i class="fa fa-pencil" aria-hidden="true"></i>
<br>link </li>
<li><i class="fa fa-gavel" aria-hidden="true"></i>
<br>link</li>
<li>
<br> Welcome </li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-mg-2 col-sm-2"> sidebar </div>
<div class="col-mg-10 col-sm-10"> content </div>
</div>
</div>
css:
.navbar-inverse {
padding: 20px;
color: white;
}
jsfiddle: https://jsfiddle.net/5zc66j20/
thanks.
Upvotes: 1
Views: 16836
Reputation: 2129
As per Bootstrap's documentation on : http://getbootstrap.com/components/#navbar-fixed-top. By default, the navbar is 50px high.
solution 1:
body {
padding-top: 70px;
}
solution 2:
change the class : navbar-fixed-top
to navbar-static-top
thanks all.
Upvotes: 4
Reputation: 1522
I would highly recommend this tutorial for getting things working
It looks to me like they add padding to the top of the body. I admit that I am not crazy about this answer either. However, if the navbar has position: fixed;
, there is no way to make other elements automatically flow around it (that is kind of the point of position: fixed
).
Upvotes: 0
Reputation: 1473
just because of the position
property this problem occurs.
now the solution is:
.margin-top100{
margin-top:100px;
}
use class margin-top100
when your content section starts.
Upvotes: 1