Dropdown not working


Topic: Dropdown not working

TRG asked 8 months ago

Dear Community
I have a problem which I hope you can solve.

  • ● The Navbar profile picture should provide a dropdown
  • ● The Navbar should open up when you click it in mobile version

None of the above happen. You can test it out yourself: http://blogg.bplaced.net/

Here is my Navbar code:

<header>
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
            <div class="container-fluid">
                <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">
                    <a class="navbar-brand" href="/">
                        <img src="img/favicon.png" height="30" alt="Logo" loading="lazy"/>
                    </a>
                    <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link active" aria-current="page" href="/">Startseite</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="registration">Registrieren</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="login">Anmelden</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="blogs.php">Blogs</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="account">Konto</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav d-flex flex-row">
                        <!-- Avatar -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="22" alt="profile" loading="lazy"/>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="account">Mein Profil</a></li>
                                <li><a class="dropdown-item" href="settings">Settings</a></li>
                                <li><a class="dropdown-item" href="#">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Navbar -->
    </header>

Mikołaj Smoleński staff commented 8 months ago

As I can see You don't import any MDB JS file, which is necessary for dropdown and other advanced components. Please add js file to your project and check it again. Best regards


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB 5
  • MDB Version: -
  • Device: Fujitsu Esprimo C710
  • Browser: Chrome 84.0.4147.105
  • OS: Windows 10 2004
  • Provided sample code: No
  • Provided link: Yes