NavBar Collapse not working in mdb 5 3.0.0+


Topic: NavBar Collapse not working in mdb 5 3.0.0+

jeffpfoster asked 4 years ago

Expected behavior The collapse button expands the menu on mobile/small screens.

Actual behavior The collapse button isn't expanding the menu on mobile/small screens.

Resources (screenshots, code snippets etc.)

<!-- Navbar brand -->
          <a class="navbar-brand" href="/">
            <img
              src="img/logo.png"
              height="100"
              alt=""
              loading="lazy"
              style="margin-top: -3px;"
            />
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarExample01"
            aria-controls="navbarExample01"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarExample01">

The code above works on 2.2.1 but modals code isn't working there. Then move to 3.0.0+ (3.1.0 tried as well) and the code doesn't work for collapse but the modal does work.


jeffpfoster commented 4 years ago

Further testing: I took the sample https://mdbootstrap.com/snippets/standard/mdb-lab/2820970 to take someone else's code and test it. I copied the html and then took the 3.1.0 pro version of the mdb css and js. I then shrank the browser window down and menu button came up but it was unable to be expanded.

You can test this at https://jeffpfoster.com/snippet/index.html


Wojstan staff answered 4 years ago

Try changing data attributes, for example: data-mdb-toggle instead of data-toggle, due to MDB new release.

See here for more information: https://mdbootstrap.com/docs/standard/getting-started/migration/#section-migrating-from-v2-to-v3


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Pixel 4x/Pinebook Pro/MBPro
  • Browser: firefox
  • OS: OSX/Android/Manjaro
  • Provided sample code: No
  • Provided link: No
Tags