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/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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