18

I am using Bootstrap 4.
I have a question about the Navbar "Fixed top" class. http://v4-alpha.getbootstrap.com/components/navbar/#placement
The Navbar "Fixed top" class covers content.

like this demo below, the Navbar covers <div class="jumbotron">,I want the Navbar to not cover it, what should I do?

I have no idea how to prevent the Navbar from covering content, because the device's size is visible. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
    </ul>
    <form class="form-inline pull-xs-right">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-success-outline" type="submit">Search</button>
    </form>
</nav>
<div class="jumbotron">
    <h1 class="display-3">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="m-y-2">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
Mitch Wilkins
  • 495
  • 4
  • 19
zwl1619
  • 4,002
  • 14
  • 54
  • 110

5 Answers5

27

Try using sticky-top instead of fixed-top this worked for me on Bootstrap 4 Alpha6.

Vlad
  • 753
  • 2
  • 10
  • 26
0

In my opinion the best way would be to set an enclosing tag to the rest of the content that it is covering and set the margin-top attribute in css in vw or vh or percentages (Depending on your use case) to make sure no content is hidden by the fixed bar on the top. This will make sure it is even resizable without significant changes in the navbar's effect on the page although i would suggest changing the margin on the basis of page size using the @media controller in css.

For more information on your problem you can check this thread: twitter bootstrap navbar fixed top overlapping site

Community
  • 1
  • 1
BanelingRush
  • 92
  • 7
0

You can fix this with css

<style>
  body {
     margin-top: 50px;
  }
</style>
Kld
  • 6,970
  • 3
  • 37
  • 50
0

Use:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

as shown here on w3schools.com

The 4.0.0 version of bootstrap css doesn't work properly. I had the same problem and replacing with 3.3.7 version fixed it.

Viet
  • 6,513
  • 12
  • 42
  • 74
0

You can Use class .sticky-top or overcome this using custom CSS

body{
    padding-top: 70px;    
    z-index: 0;
}
Ali Metwally
  • 193
  • 2
  • 5