JavaScript – Bootstrap 5 – Mobile menu does not open.

I’ve been in this predicament for days already. I couldn’t find a solution anywhere, so I’m asking the experts here 🙂

I can’t open my mobile menu. Nothing is happening

It looks like this:

    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img src="/static/img/logo.svg" alt="logo">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                    id="toggleMobileNav" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            <div class="collapse navbar-collapse navbar-mobile" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link mobile-nav-link"href="/#features">Features</a>
                    <li class="nav-item">
                        <a class="nav-link mobile-nav-link"href="/#download">Download</a>
                    <li class="nav-item">
                        <a class="nav-link mobile-nav-link" href="/about">About us</a>
                    <li class="nav-item">
                        <a class="nav-link" href="/faq">FAQ</a>
                    <li class="nav-item">
                        <a class="nav-link" href="/blog">Blog</a>

In the meantime, I have already replaced it with the code given on the official documentation of bootstraps5 (

I watched several YouTube videos, where they just pasted it and it worked. Even the bootstrap5 documentation example doesn’t work. Can anyone see the error?


Write a Comment

Your email address will not be published. Required fields are marked *