¿How to solve Intros with navbar transparent? ¿Why when scr

HTML

<mdb-navbar-brand>
  <a class="navbar-brand" href="#">
    <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt="">
  </a>
</mdb-navbar-brand>

<!-- Collapsible content -->
<links>

  <!-- Links -->
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">
        <mdb-icon fab icon="pinterest-p"></mdb-icon>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <mdb-icon fab icon="dribbble"></mdb-icon>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <mdb-icon fab icon="facebook-f"></mdb-icon>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <mdb-icon fab icon="instagram"></mdb-icon>
      </a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown" dropdown>
      <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
        <mdb-icon fas icon="user"></mdb-icon>
        <span class="caret"></span></a>
      <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary dropdowm-menu-right" role="menu">
        <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
        <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
        <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
        <div class="divider dropdown-divider"></div>
        <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
      </div>
    </li>

  </ul>
  <!-- Links -->

</links>
<!-- Collapsible content -->

<div class="row">

  <div class="col-md-6">

    <div class="d-flex flex-column justify-content-center align-items-center h-100">
      <h1 class="heading display-3">Material Design for Bootstrap</h1>
      <h4 class="subheading font-weight-bold">World's most popular framework for building responsive, mobile-first
        websites and apps</h4>
      <div class="mr-auto">
        <button type="button" mdbBtn color="lily" rounded="true" class="btn-margin">Get started <i
          class="fas fa-caret-right ml-3"></i></button>
      </div>
    </div>

  </div>

  <div class="col-md-6">

    <div class="view">
      <img src="https://images.pexels.com/photos/325045/pexels-photo-325045.jpeg" class="img-fluid"
           alt="smaple image">
      <div class="mask flex-center hm-gradient">
      </div>
    </div>

  </div>

</div>

SCSS

.navbar { background: linear-gradient(40deg, rgba(0,51,199,.3), rgba(209,149,249,.3)); } .navbar:not(.top-nav-collapse) { background: transparent; } .navbar .navbar-brand img { height: 40px; margin: 10px; } .hm-gradient { background: linear-gradient(40deg, rgba(0,51,199,.3), rgba(209,149,249,.3)); } .heading { margin: 0 6rem; font-weight: 700; color: #5d4267; } .subheading { margin: 2.5rem 6rem; color: #bcb2c0; } .btn.btn-margin { margin-left: 6rem; margin-top: 3rem; } .btn.btn-lily { background: linear-gradient(40deg, rgba(0,51,199,.7), rgba(209,149,249,.7)); } .title { margin-top: 6rem; margin-bottom: 2rem; color: #5d4267; } .subtitle { color: #bcb2c0; margin-left: 20%; margin-right: 20%; margin-bottom: 6rem; } .dropdown-menu { left: unset !important; right: 0 ; }