How put jumbotron below menu context?

Question

I have a page using boostrap layout.

<body>
 <div class="navbar  navbar-default navbar-fixed-top" role="navigation">        
    <div class="container">
  //All menu stuff occuping all the width of the top.
 </div>

  //Jumbotron rendering body of views.
  <div class="jumbotron">
    @RenderBody()
  </div>
</body>

The jumbotron CSS:

 .jumbotron {
 height: 100%;
 padding-top: 80px;
 padding: 40px;
 margin-bottom: 0px;
 font-size: 15px;
 font-weight: 100;
 line-height: 2.1428571435;
 color: inherit;
 }

I have a view with a telerik grid, and when it is displayed on the screen it fits behind the Menu. Becouse the jumbotron is taking 100% i think. So, how can i fit the jumbotron below the menu, separating them?

Answer 1

Remove the navbar-fixed class from your nav like so:

<div class="navbar  navbar-default" role="navigation">

If you want a fixed navbar, add a padding top: 30px (equal to the height of your navbar) to body

body { padding: 30px 0 0; }

How put jumbotron below menu context?

Question

1 answers

solution1
3 ACCPTED 2013-12-20 16:42:34

How put jumbotron below menu context?

Question

1 answers

solution1 3 ACCPTED 2013-12-20 16:42:34

solution1
3 ACCPTED 2013-12-20 16:42:34