Bootstrap Navbar is disappearing in mobile view

Question

So I'm using Bootstrap 5 with my navbar but whenever I look at it with a mobile view then the buttons disappear. Hovering over it won't show anything either. Is there any way to fix this?

Here is the code:

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="https://i.imgur.com/pK7YWmW.png" height="60" width="212" alt="Server Knight profile picture.">
        </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active navbar-btn"
                        href="https://discord.com/oauth2/authorize?client_id=801424420605263902&permissions=8589934591&scope=bot">Invite
                        me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="https://discord.gg/yAd6Y2GcTe">DSOF</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        About the bot
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dropdown-btn" href="/docs">Docs</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/faq">Faq</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/team">The team</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Applications
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dropdown-btn" href="/appeal">Appeal a report</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/apply">Apply to be a bot developer</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="/donate">Donate</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <a href="/login" class="login-btn nav-link active" id="login-btn">Login</a>
            </ul>
        </div>
    </div>
</nav>

and here is the JSFiddle

What do you expect to happen? You're using navbar-expand-xl which means it will collapse to mobile on less than xl screen width — Carol Skelly, Oct 09 '21 at 01:21
I got your issue. You need to add media queries in your navbar tag. In the bootstrap documentation, you will find the media queries for all the devices. — Harsh Mendapara, Oct 09 '21 at 03:51

score 1 · Accepted Answer · answered Oct 09 '21 at 01:42

Your problem is as commented this line:

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">

Like said on Bootstraps documentation the navbar will only display on xl devices (1200px width), if you want it to be shown on mobile as well remove the navbar-expand-xl from it.

Bootstrap Navbar is disappearing in mobile view

1 Answers1