navbar style is not being applied

Hi,

I copied the code from https://mdbootstrap.com/angular/sections/intros/#v-2 but it seems to me that the navbar is not behaving as expected.

This is the result: https://ibb.co/h3Th0p

Here are my files:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';

@NgModule({
            declarations: [
              AppComponent,
            ],
            imports: [
              BrowserModule,
              MDBBootstrapModulesPro.forRoot(),
            ],
            providers: [
              MDBSpinningPreloader,
            ],
            bootstrap: [ AppComponent ],
            schemas: [ NO_ERRORS_SCHEMA ],
          })
export class AppModule {
}

app.component.html

<!--Main Navigation-->
<header>

  <!--Navbar-->
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <mdb-navbar-brand>
      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>MDB</strong></a>
    </mdb-navbar-brand>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Profile</a>
        </li>
      </ul>
      <form class="form-inline waves-light" mdbWavesEffect>
        <div class="md-form mt-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </links>
  </mdb-navbar>

  <!--Intro Section-->
  <section class="view intro-2">
    <div class="full-bg-img mask rgba-stylish-strong">
      <div class="container flex-center">
        <div class="d-flex align-items-center w-100">
          <div class="row flex-center pt-5 mt-3 w-100">
            <div class="col-md-6 text-center text-md-left mb-5">
              <div class="white-text">
                <h2 class="h1 display-4 wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum</h2>
                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste.</h6>
                <br>
                <a class="btn peach-gradient wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
              </div>
            </div>

            <div class="col-md-6 col-xl-5 offset-xl-1">
              <!--Form-->
              <div class="card wow fadeInRight" data-wow-delay="0.3s">
                <div class="card-body z-depth-2">
                  <!--Header-->
                  <div class="text-center">
                    <h3>Write to us:</h3>
                    <hr>
                  </div>

                  <!--Body-->
                  <div class="md-form">
                    <i class="fa fa-user prefix grey-text"></i>
                    <input type="text" id="form3" class="form-control" mdbInputDirective>
                    <label for="form3">Your name</label>
                  </div>
                  <div class="md-form">
                    <i class="fa fa-envelope prefix grey-text"></i>
                    <input type="text" id="form2" class="form-control" mdbInputDirective>
                    <label for="form2">Your email</label>
                  </div>

                  <!--Textarea with icon prefix-->
                  <div class="md-form">
                    <i class="fa fa-pencil prefix grey-text"></i>
                    <textarea type="text" id="form8" class="md-textarea"></textarea>
                    <label for="form8">Your message</label>
                  </div>

                  <div class="text-center">
                    <button class="btn peach-gradient waves-light" mdbWavesEffect>Send</button>
                    <hr>
                    <fieldset class="form-group">
                      <input type="checkbox" id="checkbox1">
                      <label for="checkbox1">Subscribe me to the newsletter</label>
                    </fieldset>
                  </div>

                </div>
              </div>
              <!--/.Form-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</header>
<!--Main Navigation-->

<main>
  <div class="container">
    <!--Grid row-->
    <div class="row py-5">
      <!--Grid column-->
      <div class="col-md-12 text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
</main>

app.component.scss

.intro-2 {
  background: url("https://mdbootstrap.com/img/Photos/Others/img%20(46).jpg")no-repeat center center;
  background-size: cover;
}
.view {
  height: 100vh !important;
}
.top-nav-collapse {
  background-color: #ff8a65 !important;
}
.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}
@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background: #ff8a65 !important;
  }
}
.md-form .prefix {
  font-size: 1.5rem;
  margin-top: 1rem;
}
h6 {
  line-height: 1.7;
}
@media (max-width: 740px) {
  .full-height,
  .full-height body,
  .full-height header,
  .full-height header .view {
    height: 1150px;
  }
}