Responsive navbar dissapears < 768px-CodePudding

I've been struggling with a bootstrap navbar, basically what I wanna do is a simple responsive navbar.

I've looked up all kinds of tutorials and I can't seem to figure out my mistake.

Basically, my navbar dissapears when my screen width is under 768px here is the code for my navbar and also the css.

HTML:

<header>
      <nav >
        <div >
          <a  href="/">
            <img src="{% static 'images/logo2.png' %}" width="40%" />
          </a>
          <div >
            <button
              type="button"
              
              data-toggle="collapse"
              data-target="#navbarCollapse"
            >
              <span ></span>
              <span ></span>
              <span ></span>
            </button>
          </div>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a href="/" >Acasă</a>
              </li>
              <li >
                <a href="/about/" >Despre</a>
              </li>
              <li >
                <a href="/services/" >Servicii</a>
              </li>
              <li >
                <a href="/products/" >Produse</a>
              </li>
              <li >
                <a href="/quote/" >Calculator</a>
              </li>
              {% if request.user.is_authenticated %}
              <li >
                <a  href="{% url 'profile' %}"
                  >Profilul tau, {{request.user.username}}</a
                >
              </li>
              <li >
                <a
                  href="{% url 'logout' %}"
                  
                  style="color: #ebce09"
                  >Logout</a
                >
              </li>
              {% else %}
              <li >
                <a
                  href="{% url 'login' %}"
                  
                  style="color: #ebce09"
                  >Login</a
                >
              </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
    </header>

CSS:

* {`enter code here`
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
}
a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar {
  background-color: #12153c;
}
.nav-link {
  color: white;
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}
.nav-link:hover {
  color: #d0b608;
}

Also, I'm working with django so ignore the {% %} django inputs

* {
  `enter code here` box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
}

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar {
  background-color: #12153c;
}

.nav-link {
  color: white;
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}

.nav-link:hover {
  color: #d0b608;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<header>
  <nav >
    <div >
      <a  href="/">
        <img src="{% static 'images/logo2.png' %}" width="40%" />
      </a>
      <div >
        <button type="button"  data-toggle="collapse" data-target="#navbarCollapse">
              <span ></span>
              <span ></span>
              <span ></span>
            </button>
      </div>
      <div  id="navbarSupportedContent">
        <ul >
          <li >
            <a href="/" >Acasă</a>
          </li>
          <li >
            <a href="/about/" >Despre</a>
          </li>
          <li >
            <a href="/services/" >Servicii</a>
          </li>
          <li >
            <a href="/products/" >Produse</a>
          </li>
          <li >
            <a href="/quote/" >Calculator</a>
          </li>
          {% if request.user.is_authenticated %}
          <li >
            <a  href="{% url 'profile' %}">Profilul tau, {{request.user.username}}</a
                >
              </li>
              <li >
                <a
                  href="{% url 'logout' %}"
                  
                  style="color: #ebce09"
                  >Logout</a
                >
              </li>
              {% else %}
              <li >
                <a
                  href="{% url 'login' %}"
                  
                  style="color: #ebce09"
                  >Login</a
                >
              </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
    </header>

CodePudding user response：

I cross-referenced it to their navbar documentation for bootstrap 5. Not sure what version of bootstrap you're using but the piece that was missing to make it work was:

<button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span ></span>
</button>

which I replaced for this:

<div >
   <button type="button"  data-toggle="collapse" data-target="#navbarCollapse">
      <span ></span>
      <span ></span>
      <span ></span>
   </button>
</div>

Run this code and you should see a pink square that would normally be a nav icon.

* {`enter code here`
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
}
a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar {
  background-color: #12153c;
}
.nav-link {
  color: white;
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}
.nav-link:hover {
  color: #d0b608;
}

button.navbar-toggler {
  background: pink;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header>
      <nav >
        <div >
          <a  href="/">
            <img src="{% static 'images/logo2.png' %}" width="40%" />
          </a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a href="/" >Acasă</a>
              </li>
              <li >
                <a href="/about/" >Despre</a>
              </li>
              <li >
                <a href="/services/" >Servicii</a>
              </li>
              <li >
                <a href="/products/" >Produse</a>
              </li>
              <li >
                <a href="/quote/" >Calculator</a>
              </li>
              <!--{% if request.user.is_authenticated %}
              <li >
                <a  href="{% url 'profile' %}"
                  >Profilul tau, {{request.user.username}}</a
                >
              </li>
              <li >
                <a
                  href="{% url 'logout' %}"
                  
                  style="color: #ebce09"
                  >Logout</a
                >
              </li>
              {% else %}-->
              <li >
                <a
                  href="{% url 'login' %}"
                  
                  style="color: #ebce09"
                  >Login</a
                >
              </li>
              {% endif %}
            </ul>
          </div>
          <!--<div >
            <button
              type="button"
              
              data-toggle="collapse"
              data-target="#navbarCollapse"
            >
              <span ></span>
              <span ></span>
              <span ></span>
            </button>
          </div>-->
        </div>
      </nav>
    </header>