I've made a bootstrap 5 navbar but it's not expanding when I make it a small screen, works for middle size (iPad screen dim), is this a common issue?

Max Smith 0
Viewed 35

So the code below is for Django hence the blocks for the links, they work fine it's just when the screensize is too small the drop down nav doesnt drop down and if i leave it dropped down and make the screen smaller then I can't make it un drop down. Very annoying because I've got the website looking actually nice for once but it does this.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" id="logo" href="/">Company</a>
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
                <div class="navbar-toggler-icon"></div>
            </button>

            <div class="collapse navbar-collapse" id="nav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
                    <li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
                    <li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
                    <li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
                    <li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
                    <li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
                </ul>
            </div>
        </div>
    </nav>
responsive-design twitter-bootstrap django css html
2 Answers

Try replacing navbar-expand-lg to navbar-expand class on <nav> tag.

"lg" is for larger devices based on responsiveness.

You can check doc here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

So your code should be:

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" id="logo" href="/">Company</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
            <div class="navbar-toggler-icon"></div>
        </button>

        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
                <li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
                <li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
                <li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
                <li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
                <li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
            </ul>
        </div>
    </div>
</nav>
Scario Eva0

Add aria-expanded="false" on button

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" id="logo" href="/">Company</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-expanded="false aria-label="Expand Navigation">
            <div class="navbar-toggler-icon"></div>
        </button>

        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
                <li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
                <li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
                <li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
                <li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
                <li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
            </ul>
        </div>
    </div>
</nav>
ab_qayyum0
Related