It looks like you have a problem with your local files, probably imports.

You seem to have a problem with features that rely on JS, which means you probably did not add it properly to your project.

Try creating a new project (to check if you did not miss any step or you did not make typo in file paths) from this lesson: https://mdbootstrap.com/learn/mdb-foundations/basics/quick-start/

Check if the carousel, navbar, or dropdowns work there.

Hi it occurs locally o na project, code copied from MDB tutorial https://mdbootstrap.com/learn/mdb-foundations/bootstrap/navbar/

with slight amend mends, even code with no modifications work, however, demo code works fine... same with carousel, it didn't slide

since I cannot place snippets as account id below 7 days, please see my code below:

<!-- Navbar -->
<nav  style="z-index: 10;"
  class="navbar navbar-expand-md navbar-dark bg-dark">
  <!-- Container wrapper -->
  <div class="container">
    <!-- Toggle button -->
    <button class="navbar-toggler text-white" type="button" data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar brand -->
      <a class="navbar-brand mt-2 mt-lg-0" href="#">
        <i class="fab fa-jedi-order fa-2x text-info"></i>
      </a>
      <!-- Left links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ">
        <li class="nav-item">
          <a class="nav-link ms-4 me-4 text-white" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link me-4 text-white" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>
      </ul>
      <!-- Left links -->
    </div>
    <!-- Collapsible wrapper -->

    <!-- Right elements -->
    <div class="d-flex align-items-center text-white">
      <!-- Icon -->
      <a class="text-reset me-4" href="#">
        <i class="fab fa-facebook fa-2x"></i>
      </a>
      <a class="text-reset me-4" href="#">
        <i class="fab fa-snapchat fa-2x"></i>
      </a>
      <a class="text-reset me-3" href="#">
        <i class="fab fa-instagram fa-2x"></i>
      </a>

      <!-- Right elements -->
    </div>
    <!-- Container wrapper -->
</nav>
<!-- Navbar -->


<!-- Background image -->
<div class="bg-image vh-100" 
     style="
            margin-top: -68.59px;
            background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>

Does this occur on the site or locally in your project?

If locally please create a snippet that recreates that problem and I will help you troubleshoot.