creating NAV-BAR

TO ADD LOGO WE COPY THE LINK FROM FONT AWESOME AND PASTE IT.

WE MADE SOME CHANGES TO IMPROVE RESPONSIVENESS

STYLE.CSS

/* body{

    background-color: beige;

} */

.navbar{

    height: 5rem;

    background-color: white;

}

.fa-compass{

    color: #fe424d;

    font-size: 2 rem;

}

.nav-link{

    color: #222222 !important;

}

IN BOILEREPLATE.EJS

WE NEED TO PASTE THIS LINK FOR FONT-AWESOME TO WORK  <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"

      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="

      crossorigin="anonymous"

      referrerpolicy="no-referrer"

    />

NAVBAR.EJS

<nav class="navbar navbar-expand-md bg-body-light border-bottom sticky-top">

    <div class="container-fluid">

      <a class="navbar-brand" href="/"><i class="fa-solid fa-compass"></i></a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

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

        <div class="navbar-nav">

          <a class="nav-link "  href="/">Home</a>

          <a class="nav-link" href="/listings">All listings</a>

          <a class="nav-link" href="/listings/new">Add new listing</a>

        </div>

      </div>

    </div>

  </nav>