Topic: navbar dropdown not responding

Minkoo Seo free asked 1 month ago


Expected behavior Dropdown mouse hover and click doesn't show sub menus

Actual behavior Hover or click shows submenu

Resources (screenshots, code snippets etc.) I'm just replicating the example but dropdown submenu isn't working. I tried local installation as well as CDN but both don't work.

My navbar is just copy paste of doc:

<!-- Navbar -->
    <nav class="navbar navbar-expand-lg bg-light navbar-light mb-5">
        <!-- Container wrapper -->
        <div class="container">
            <!-- Navbar brand -->
            <a class="navbar-brand" href="#">Brand</a>
            <!-- Toggle button -->
            <button class="navbar-toggler"
                    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">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <!-- Link -->
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- Dropdown -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"
                           href="#"
                           id="navbarDropdown"
                           role="button"
                           data-mdb-toggle="dropdown"
                           aria-expanded="false">Dropdown</a>
                        <!-- Dropdown menu -->
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="#">Action</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Another action</a>
                            </li>
                            <li>
                                <hr class="dropdown-divider" />
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- Icons -->
                <ul class="navbar-nav d-flex flex-row me-1">
                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i></a>
                    </li>
                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Container wrapper -->
    </nav>

I have css within head tag

<link href="{{ url_for('static', filename='css/mdb.min.css') }}"
          rel="stylesheet" />

I also have js at the end of body tag

<script src="{{ url_for('static', filename='js/mdb.umd.min.js') }}"></script>

Chrome inspector shows no error, and even when I try CDN installation instruction, it still doesn't work:

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.min.css"
  rel="stylesheet"
/>


<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.umd.min.js"
></script>

Is there any other js that I should load? Please advise.


Kamila Pieńkowska staff answered 1 month ago


The example you've copied may be part of extended documentation or legacy documentation.

It uses old syntax, we've changes initiation attributes since than. More about this: https://mdbootstrap.com/docs/standard/getting-started/migration-guide/



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: desktop
  • Browser: chrome 127.0.6533.120 (Official Build) (arm64)
  • OS: Mac Sonoma 14.5
  • Provided sample code: No
  • Provided link: No