Topic: Dropdown not working

TRG free asked 2 years 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 2 years 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



I had added the mdb js , but the dropdown still not working


Anaelmarlon Luzayamo Ngweni pro commented 3 months ago

this is my website and I had tried everything , nothing is working https://staging4.greatfirsteight.org/#


Grzegorz Bujański staff commented 3 months ago

From what I can see you are using MDB4. There is a error on your website that probably blocks further code execution - that's why dropdown doesn't work. Put wow init in document ready - that should help



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: -
  • Device: Fujitsu Esprimo C710
  • Browser: Chrome 84.0.4147.105
  • OS: Windows 10 2004
  • Provided sample code: No
  • Provided link: Yes