title: transparent navbar using mdb on my Angular4
body: <p>My style.scss for the navbar</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
    background-color: transparent;
  }
  .top-nav-collapse {
    background-color: #3f51b5;
  }
  @media only screen and (max-width: 768px) {
    .navbar {
      background-color: #3f51b5;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>my home.component.html as well as my home.component.html where my background image lies</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header.masthead {
    position: relative;
    background: url("https://res.cloudinary.com/dn1b66xo5/image/upload/c_scale,q_auto:best,w_750/v1509987250/photo-1503767849114-976b67568b02_li9wxo.jpg") no-repeat fixed center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem; }
  header.masthead h1 {
    font-size: 2rem; }
  @media (min-width: 768px) {
    header.masthead {
      padding-top: 12rem;
      padding-bottom: 12rem; }
    header.masthead h1 {
      font-size: 3rem; } }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="masthead h-75 text-white text-center"&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="home-info"&gt;
        &lt;h1 class="cover-heading"&gt;Welcome to Noodles Hub&lt;/h1&gt;
        &lt;p class="lead"&gt;Order your delicious meals from your &lt;strong&gt;&lt;b&gt;HALLS AND OFFICES&lt;/b&gt;&lt;/strong&gt;.&lt;/p&gt;
        &lt;p class="lead"&gt;
        &lt;a routerLink="/products" class="btn btn-lg btn-success"&gt;Select Restaurant&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>my navbar component.html
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar top-nav-collapse" [containerInside]="false"&gt;
      &lt;logo&gt;&lt;a class="navbar-brand" routerLink="/"&gt;Noodles Hub&lt;/a&gt;&lt;/logo&gt;
      &lt;links&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item active" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"&gt;
            &lt;a routerLink="/" class="nav-link waves-light" mdbRippleRadius&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item" routerLinkActive="active"&gt;
            &lt;a class="nav-link waves-light" mdbRippleRadius routerLink="/shopping-cart"&gt;
              &lt;i class="fa fa-shopping-cart fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;span class="badge badge-warning badge-pill" *ngIf="cart$ | async as cart"&gt;
          {{ cart.totalItemsCount }}
          &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="navbar-nav ml-auto nav-flex-icons"&gt;
          &lt;li class="nav-item"routerLinkActive="active"&gt;
            &lt;a routerLink="/restaurants" class="nav-link waves-light"&gt;Restaurants&lt;/a&gt;
          &lt;/li&gt;
          &lt;ng-template #anonymousUser&gt;
            &lt;li class="nav-item" routerLinkActive="active"&gt;
              &lt;a class="nav-link waves-light" routerLink="/login"&gt;Login &lt;i class="fa fa-user-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ng-template&gt;
          &lt;li *ngIf="appUser; else anonymousUser" class="nav-item dropdown" dropdown routerLinkActive="active"&gt;
            &lt;a *ngIf="appUser.name"  class="nav-link dropdown-toggle waves-light"  dropdownToggle  mdbRippleRadius&gt;{{ appUser.name }}&lt;/a&gt;
            &lt;a   *ngIf="!appUser.name" class="nav-link dropdown-toggle waves-light" dropdownToggle   mdbRippleRadius&gt;Welcome&lt;/a&gt;
            &lt;div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"&gt;
              &lt;a class="dropdown-item waves-light" mdbRippleRadius routerLink="/my/orders"&gt;My Orders&lt;/a&gt;
              &lt;ng-container *ngIf="appUser.isAdmin"&gt;
                &lt;a class="dropdown-item waves-light" mdbRippleRadius routerLink="/admin/orders"&gt;Manage Orders&lt;/a&gt;
                &lt;a class="dropdown-item waves-light" mdbRippleRadius routerLink="/admin/restaurants"&gt;Manage Products&lt;/a&gt;
              &lt;/ng-container&gt;
              &lt;div class="divider dropdown-divider"&gt;&lt;/div&gt;
              &lt;a mdbRippleRadius (click)="logout()" class="dropdown-item waves-light"&gt;Log Out&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/links&gt;
  
    &lt;/mdb-navbar&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The markup from <a href="https://mdbootstrap.com/angular/layout/navigation/#i-f-t-n" rel="nofollow noreferrer">Mdb</a> is actually working but the problem I'm having is that my navbar is a different component so the background image isn't overlapping with the navbar</p>