Issue with Navbar Responsiveness in MDB Standard v5.1.0


Topic: Issue with Navbar Responsiveness in MDB Standard v5.1.0

Castle Keepers asked 6 days ago

Hi, I’m working on a firearms training website using MDB Standard v5.1.0. I set up a responsive navbar with a toggler for mobile view, but the collapse/expand behavior isn’t working properly. On smaller screens, the menu button appears, but clicking it doesn’t expand the navigation links.

I followed the docs and included the required CSS/JS files, but maybe I’m missing something. MDB Navbar Test Castle Keepers

  <!-- Toggler -->
  <button
    class="navbar-toggler"
    type="button"
    data-mdb-toggle="collapse"
    data-mdb-target="#navbarNav"
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <i class="fas fa-bars"></i>
  </button>

  <!-- Collapsible content -->
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Training</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Safety</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
  <!-- Collapsible content -->
</div>

Has anyone run into this issue? Do I need to initialize JavaScript manually, or should it work out of the box?

Thanks in advance for any guidance!


Kamila Pieńkowska staff answered 3 days ago

You are using the current syntax with legacy versions. Initiation with data attributes was introduced in v7. You need to reference this version of the documentation:

https://v5-standard-5.legacydocs.mdbootstrap.com/docs/standard/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 9.1.0
  • Device: Desktop & iPhone (tested both)
  • Browser: Chrome (latest), Safari (iOS)
  • OS: Windows 10, iOS 17
  • Provided sample code: No
  • Provided link: No