Collapse navbar in html issue

I am making a navbar in django using html, css and bootstrap. I want it to collapse if the view is narrow enough, i have achieved this but it makes a strange thing when you press the menu button, it opens but very widely and strange like this:

Before clicking the menu: Menu is hidden

While holding the click: Menu is expanded

This is my code right now:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
    <title>{%block title%}Base{%endblock%}</title>
</head>

<body>
<style>
    #github {
        margin-left: -4;
        margin-right: 10;
    }

    #busqueda {
        margin: auto;
    }

    #logout {
        margin-left: 5;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a id="github" href="https://github.com/pabsanort2/hongOS" target="_blank" rel="noopener noreferrer"><img
            src="{% static 'github.png' %}" alt="enlace github"></a>
    <a class="navbar-brand" href="/home">HongOS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
        aria-controls="navbar" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/clasificar">Clasificar <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/info">Info <span class="sr-only">(current)</span></a>
            </li>
            <!-- <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>  -->
            <!-- <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </li> -->
            <!-- <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li> -->
        </ul>
    </div>
    <ul class="navbar-nav mr-auto" id="busqueda">
        <form class="form-inline my-2 my-lg-0" method="POST" action="{%url 'busqueda'%}">
            {%csrf_token%}
            <input class="form-control mr-sm-2" type="search" placeholder="Buscar hongos" aria-label="Search"
                name="busqueda">
            <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit"><svg
                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-search" viewBox="0 0 16 16">
                    <path
                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg></button>
        </form>
    </ul>

    <a id="logout" type="button" class="btn btn-outline-danger" href="/logout">Logout</a>
</nav>
{% block content %}{% endblock %}

Collapse navbar in html issue

0 Answers