CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raduken
raduken

Reputation: 2129

Bootstrap sidebar and content under navbar

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

Answers (3)

raduken
raduken

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

bytesized
bytesized

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

Gautam Jha
Gautam Jha

Reputation: 1473

Fiddle UPDATED

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

Related Questions