Bootstrap Jumbotron Under Nav Bar

Bootstrap jumbotron under nav bar

Try adding up some custom CSS and HTML:

HTML:

<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/

CSS:

.background-image {

    height: 400px;
    background-image: url('community.jpg');
    width: 100%;
    position: absolute;
    top:0;
    z-index: -100;

}

After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.

Jumbotron and Navigation

Here's a basic example. Change your navbar to background: transparent, place a container inside the jumbotron and inside the navbar as well.

<header class="jumbotron">
  <div class="container">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">

Working Example:

nav.navbar {  background: transparent;  border: 0;}@media (max-width: 767px) {  nav.navbar .navbar-collapse {    border: 0;    box-shadow: none;  }}header {  background-image: url('http://www.100resilientcities.org/page/-/100rc/img/cities/cities-la_optimized.jpg');  background-size: cover;  background-position: center;  height: 400px;}header.jumbotron h1 {  padding-top: 100px;}header.jumbotron h1,header.jumbotron p {  color: white;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><header class="jumbotron">  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">      <div class="container">
        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand" href="#">Brand</a>        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          <ul class="nav navbar-nav navbar-right">            <li><a href="#">Home</a>            </li>            <li><a href="#services">Services</a>            </li>            <li><a href="#works">Works</a>            </li>            <li><a href="#about">About</a>            </li>            <li><a href="#contact">Contact</a>            </li>          </ul>        </div>
      </div>    </nav>
    <h1>Me</h1>    <p class="lead">Web Developer</p>
  </div></header><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap Navbar on top of jumbotron (overlay)

Use the fixed-top Navbar as explained in the docs...

<nav class="navbar navbar-expand-md navbar-light fixed-top">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/home.php">Item 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Item 2</a>
            </li>
        </ul>
    </div>

    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="/home.php">
            <img src="/images/logo.svgs" height="35" alt="Sample Image">Logo
        </a>
    </div>

    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Page 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Page 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Page 3</a>
            </li>
        </ul>
    </div>
</nav>

<section class="cover jumbotron jumbotron-fluid" id="cover">
    <div class="container-fluid">
        <div class="row">
            <div class="cover-text col-5">
                <h1 class="display-4">LOREM IPSUM TITLE</h1>
                <p class="lead">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis pellentesque metus id lacinia.
                </p>
            </div>

            <div class="col-1">
            </div>

            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <a href="#" class="card-link">Card link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

https://www.codeply.com/go/dGengaALpm

Is it possible to fix a jumbotron and nav bar to the top of a screen?

The easiest way -- using only Bootstrap 4 native classes without any custom css -- to fix both, the jumbotron and the navbar to the top of the screen, is to wrap them both in a div with the class sticky-top like so (click the "run code snippet" button below and expand to full page to check):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="sticky-top">    <div class="jumbotron jumbotron-fluid bg-white my-0 py-0">        <img class="img-fluid" src="https://picsum.photos/2000/200">    </div>
    <nav class="navbar navbar-expand-md navbar-light bg-light mb-3">        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon"></span>        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">        <ul class="nav navbar-nav">            <li class="nav-item dropdown">                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                    BOOKS                </a>                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                    <a class="dropdown-item" href="#">Branding Sutra</a>                </div>            </li>            <li class="nav-item">                <a class="nav-link" href="#">SERVICES</a>            </li>            <li class="nav-item">                <a class="nav-link" href="#">ABOUT</a>            </li>        </ul>        </div>    </nav></div>
<div class="container-fluid">    <div class="row">        <div class="col-9 col-sm-6 col-md-3">            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium fugit veritatis ipsam possimus iste ipsum aut cupiditate earum eveniet vel minus laudantium eligendi, et blanditiis tempore itaque enim facere dolorum deserunt obcaecati autem? <br><br> Dolorem earum enim est, voluptas harum eveniet pariatur! Amet, ipsum necessitatibus explicabo repellat quisquam, eum nam, cupiditate excepturi sed magni, natus commodi deserunt cum praesentium provident debitis dolore ducimus expedita totam non. A sed praesentium dolorum doloremque ipsa nesciunt quis inventore fugiat voluptatum, deleniti, rem. <br><br> Animi iure obcaecati fuga repellendus porro repellat et necessitatibus maiores, explicabo veniam totam molestiae dolorem deleniti, accusamus aperiam vitae. Provident, sapiente! Facere labore explicabo illo incidunt quas laborum placeat sunt perspiciatis suscipit ducimus esse distinctio molestiae expedita ipsam animi iste delectus id, cum est possimus quos eveniet similique necessitatibus. Tempora itaque impedit aperiam asperiores ullam qui, non explicabo dignissimos odio dicta ipsam molestias officia libero porro aliquid quod deleniti magni tempore similique magnam amet sapiente. <br><br> Laboriosam consectetur suscipit voluptatem, debitis, minus repellat iure cum odio illum explicabo deleniti. Repellat ad et quaerat, fuga quis iste a autem illo repellendus iusto ipsum nesciunt eius fugit, repudiandae, voluptates? Alias voluptate reiciendis esse libero sed debitis deserunt totam, repellat. Iusto soluta, corporis animi nesciunt optio corrupti non aut ad magnam beatae illo voluptatibus iste quidem numquam impedit reiciendis similique nihil omnis odio quod? Molestiae repellendus atque, adipisci.        </div>    </div></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Jumbotron breaks navbar on mobile website

* {   margin: 0;   padding: 0;}
.banner {    background: #e9ecef;}
@media only screen and (max-width: 767px) {.display-3 {    font-size: 2rem !important;}}

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>JS Bin</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  </head>  <body>    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">      <a class="navbar-brand" href="../">IP: SkyWars.fun</a>      <button class="navbar-toggler" type="button" data-toggle="collapse"        data-target="#navbarColor01" aria-controls="navbarColor01"        aria-expanded="false" aria-label="Toggle navigation">      <span class="navbar-toggler-icon"></span>      </button>      <div class="collapse navbar-collapse" id="navbarColor01">        <ul class="navbar-nav mr-auto">          <li            class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>          <li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>          <li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>          <li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>          <li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>        </ul>        <form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">          <input class="form-control mr-sm-2" type="text" name="player"            placeholder="Search player">          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>        </form>      </div>    </nav>    <section class="banner">      <div class="container-fluid">          <div class="row">            <div class="col-12">              <div class="jumbotron">                <h1 class="display-3">                  <b>Welcome to SkyWars.fun</b>                </h1>                <p class="lead">We focus on updating regularly, and we listen close to                  our community suggestions.                </p>                <hr class="my-4">                <p>We have a perk system, comparable with kits or abillities. Any                  player can enable 3 perks at once. These perks give small advantages                  for your gameplay. Choose wisely, and adapt with your perks! Happy                  SkyWars! And have fun!                </p>                <p class="lead">                  <a class="btn btn-primary btn-lg" href="../tips" role="button">Tips                  and tricks</a>                </p>              </div>            </div>        </div>      </div>    </section>    <script      src="https://code.jquery.com/jquery-3.4.1.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  </body></html>

image inside jumbotron div cover the navigation bar when navbar set to 'position: absolute;'

ok so z-index: 10; was what fixed my code and this is the result i was trying to get. I should have to listen the full instruction here but I ignored z-index: 10; and this was what cause the problem.

.navbar {
  position: absolute;
  top : 0;
  z-index: 10;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}

nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  height:auto;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;

}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:    #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }

  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }

  p {
  font-size: 3.5vmin;
}

  #abilities {
    margin-bottom: 30px;
  }

  #main-jum img {
    max-width: 100%;
    min-height: 400px;
    object-fit:cover;
  }

}

I don't want the navbar be over jumbotron

The classes from a bootstrap added a position: fixed; to your navbar. It means, that your navbar is always visible at the top of your screen all the time, even when you are scrolling down.

There are 2 ways to fix this:

Remove .navbar-fixed-top class from your nav component, but then you won't see your navbar at the top when you scroll down.
Add some margin-top to your container element.

Bootstrap Jumbotron Under Nav Bar