About Bootstrap 4 – Navbar top placement

About Bootstrap 4 – Navbar top placement

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

,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.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more


Solution 1:

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

Solution 2:

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.

Related:  Trigger Bootstrap Dropdown with JS

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

Solution 3:

You can fix this with css

  body {
     margin-top: 50px;

Solution 4:


<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.

Solution 5:

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

    padding-top: 70px;    
    z-index: 0;