<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-scroll bg-white">

  <div class="container-fluid">

    <a href="/" class="navbar-brand" id="logo-navbar">

          <img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" alt="MDB Logo" draggable="false">

      </a>    

    <button

      class="navbar-toggler"

      type="button"

      data-mdb-toggle="collapse"

      data-mdb-target="#navbarRightAlignExample"

      aria-controls="navbarRightAlignExample"

      aria-expanded="false"

      aria-label="Toggle navigation">

      <i class="fas fa-bars"></i>

    </button>

    <div class="collapse navbar-collapse" id="navbarRightAlignExample">

      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle"

            href="#"

            id="navbarDropdown"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false">Dropdown 1</a>

          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <li>

              <a class="dropdown-item" href="#">Action</a>

            </li>

            <li>

              <a class="dropdown-item" href="#">Another action</a>

            </li> 

            <li><hr class="dropdown-divider" /></li>

            <li>

              <a class="dropdown-item" href="#">Something else here</a>

            </li>

          </ul>

        </li>

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle"

            href="#"

            id="navbarDropdown"

            role="button"

            data-mdb-toggle="dropdown"

            aria-expanded="false">Dropdown 2</a>

          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <li>

              <a class="dropdown-item" href="#">Action</a>

            </li>

            <li>

              <a class="dropdown-item" href="#">Another action</a>

            </li> 

            <li><hr class="dropdown-divider" /></li>

            <li>

              <a class="dropdown-item" href="#">Something else here</a>

            </li>

          </ul>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled">Disabled</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

<div class="p-5 text-center bg-image"

        style="background-image: url('https://mdbootstrap.com/img/new/slides/052.jpg'); height: 400px; margin-top: 58px;">

        <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">

          <div class="d-flex justify-content-center align-items-center h-100">

            <div class="text-white">

              <h1 class="mb-3">Travel Blog</h1>

              <h4 class="mb-3">

                Travel is the only thing you buy that makes you richer

              </h4>

            </div>

          </div>

        </div>

      </div>

​

<div class="row row-cols-1 row-cols-md-2 g-4 mt-5">

  <div class="col">

    <div class="card">

      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp" class="card-img-top" alt="Hollywood Sign on The Hill"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">

          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        </p>

      </div>

    </div>

  </div>

  <div class="col">

    <div class="card">

      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" class="card-img-top" alt="Palm Springs Road"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">

          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        </p>

      </div>

    </div>

  </div>

  <div class="col">

    <div class="card">

      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" class="card-img-top" alt="Los Angeles Skyscrapers"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>

      </div>

    </div>

  </div>

  <div class="col">

    <div class="card">

      <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" class="card-img-top" alt="Skyscrapers"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">

          This is a longer card with supporting text below as a natural lead-in to

          additional content. This content is a little bit longer.

        </p>

      </div>

    </div>

  </div>

</div>

.navbar-scroll .fa-bars {

    color: #4f4f4f;

}

​