Bootstrap4 Navbarを背景の画像上に重ねたい。

前提・実現したいこと

コードの練習のために、サイトを模写しています。

見本のURLです。
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1589062819_ZjA1Nzg4ZDVmMjE4

実現したいのは、
BootstrapのJumbotronの中にNavbarのハンバーガーメニューを重ねることです。
見本のサイトでは左上のアイコンと背景が重なっており、これを再現したいです。

Navbarを使っている理由
レシポンシブ対応としたく、1200px以下は折りたたまれた状態、
1201px以上ではNavbarが上部、背景が下部に配置されるレイアウトとしたいためにNavbarを使っています。

そもそもJumbotronとNavbarが間違っているようでしたら、他の方法でも構いません。

色々なサイトを探してみましたが、解決できないため、ご教示のほどよろしくお願いいたします。

発生している問題・エラーメッセージ

ハンバーガーメニューがサイトの最上段に設置され、背景画像と重ねることができません。

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10    
11    
12  </head>
13  <body>
14    <header>
15      <nav class="navbar navbar-expand-xl navbar-light">
16        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
17          <span class="navbar-toggler-icon"></span>
18        </button>
19        <div class="collapse navbar-collapse" id="Navbar">
20          <a class="navbar-brand" href="#"><img src="favicon.ico" alt="画像">
21          </a>
22          <ul class="navbar-nav mr-auto mt-2 mt-xl-0">
23            <li class="nav-item active">
24              <a class="nav-link" href="#">概要 <span class="sr-only">(現位置)</span></a>
25            </li>
26            <li class="nav-item active">
27              <a class="nav-link" href="#">準備 <span class="sr-only">(現位置)</span></a>
28            </li>
29            <li class="nav-item active">
30              <a class="nav-link" href="#">安全 <span class="sr-only">(現位置)</span></a>
31            </li>
32            <li class="nav-item active">
33              <a class="nav-link" href="#">マネープラン <span class="sr-only">(現位置)</span></a>
34            </li>
35          </ul>
36          <button type="button" class="btn btn-danger mr-5">はじめる</button>
37        </div><!-- /.collapse -->
38      </nav>
39    
40        <div class="jumbotron jumbotron-fluid">
41          <div class="container">
42            <div class="row text-white text-left py-3 pl-2">
43              <div class="h1">Airbnbホストになって、暮らしをレベルアップ？</div>
44            </div>
45          </div><!-- /.container -->
46        </div><!-- /.jumbotron -->

css
1.jumbotron.{
2  background-image: url("...");
3  background-size: cover;
4  background-position: center 0%;
5  font-size: 40px;
6}

試したこと

css
1.jumbotron {
2  background-image: url("../img/welcom_sm.jpg");
3  background-size: cover;
4  background-position: center 0%;
5  font-size: 40px;
6  position: relative;
7  top: -50px;
8}
9
10
11.navbar {
12  position: absolute;
13}