Navbar Example2

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!---Style Sheets-->
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
  <script src="/__/firebase/6.4.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
  <!---Website Title-->
  <title>Padd</title>
</head>

<body>
  <!---Main Content-->
  <!---Navigation Bar-->
  <nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light">
      <div class="container">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarMenu">
            <div class="row">
            <!---Padd Branding-->
            <ul class="nav navbar-nav">
              <li><a class="navbar-brand" href="#"><img src="http://wpsites.net/wp-content/uploads/2013/09/500x150.png" alt="Notepad Logo"
                    style="width:150px;"></a></li>
            </ul>
            <!---Navigation Links-->
            <ul class="navbar-nav mx-auto">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Catalogue
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
                  <a class="dropdown-item" href="#">Furniture</a>
                  <a class="dropdown-item" href="#">Lighting</a>
 ...