Geek Answers Handbook

About Bootstrap 4 - Top Navbar

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

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

I have no idea how to prevent Navbar from closing content because the size of the device 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="my-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>
+15
html css twitter-bootstrap
source share
5 answers

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

+24
source share

In my opinion, the best way would be to set the closing tag for the rest of the content that it covers, and set the margin-top attribute in css to vw or vh or percentages (depending on your use case) to make sure the content is not hidden fixed line at the top. This ensures that it is even changed without significant changes in the navigation effect on the page, although I would suggest changing the margin based on page size using the @media controller in css .

For more information about your problem, you can check this topic: twitter bootstrap navbar fixed top overlapping site

0
source share

You can fix it with css

 <style> body { margin-top: 50px; } </style>
0
source share

Using:

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

as shown here at w3schools.com

Bootstrap css 4.0.0 does not work correctly. I had the same problem and a replacement with version 3.3.7 fixed it.

0
source share

You can use the .sticky-top class or overcome this using your own CSS

 body{ padding-top: 70px; z-index: 0; }
0
source share

More articles:


All Articles