I've made a bootstrap 5 navbar but it's not expanding when I make it a small screen, works-CodePudding

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 >
        <div >
            <a  id="logo" href="/">Company</a>
            <button  data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
                <div ></div>
            </button>

            <div  id="nav">
                <ul >
                    <li ><a  href="{% url 'index' %}">Home </a></li>
                    <li ><a  href="{% url 'index' %}">Pricing </a></li>
                    <li ><a  href="{% url 'index' %}">How it Works </a></li>
                    <li ><a  href="{% url 'work' %}">Work With Us</a></li>
                    <li ><a  href="{% url 'contact' %}">Contact Us</a></li>
                    <li ><a  href="/login">Log In</a></li>
                </ul>
            </div>
        </div>
    </nav>

CodePudding user response：

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 >
    <div >
        <a  id="logo" href="/">Company</a>
        <button  data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
            <div ></div>
        </button>

        <div  id="nav">
            <ul >
                <li ><a  href="{% url 'index' %}">Home </a></li>
                <li ><a  href="{% url 'index' %}">Pricing </a></li>
                <li ><a  href="{% url 'index' %}">How it Works </a></li>
                <li ><a  href="{% url 'work' %}">Work With Us</a></li>
                <li ><a  href="{% url 'contact' %}">Contact Us</a></li>
                <li ><a  href="/login">Log In</a></li>
            </ul>
        </div>
    </div>
</nav>

CodePudding user response：

Add aria-expanded="false" on button

<nav >
    <div >
        <a  id="logo" href="/">Company</a>
        <button  data-bs-toggle="collapse" data-bs-target="#nav" aria-expanded="false aria-label="Expand Navigation">
            <div ></div>
        </button>

        <div  id="nav">
            <ul >
                <li ><a  href="{% url 'index' %}">Home </a></li>
                <li ><a  href="{% url 'index' %}">Pricing </a></li>
                <li ><a  href="{% url 'index' %}">How it Works </a></li>
                <li ><a  href="{% url 'work' %}">Work With Us</a></li>
                <li ><a  href="{% url 'contact' %}">Contact Us</a></li>
                <li ><a  href="/login">Log In</a></li>
            </ul>
        </div>
    </div>
</nav>