Bootstrap 4 navbar links don't show in collapse-CodePudding

Everything works as it should until the navbar collapses. After collapse the links disappear. I've gone over the Bootstrap examples and documentation, but can't see where my issue is.

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

<nav >
  <div >
    <a  href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"  role="img" viewBox="0 0 24 24" focusable="false"><title>Product</title><circle cx="12" cy="12" r="10"></circle><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"></path></svg>
    </a>
    <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>

    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  href="#">Tour</a>
        </li>
        <li >
          <a  href="#">Product</a>
        </li>
        <li >
          <a  href="#">Features</a>
        </li>
        <li >
          <a  href="#">Enterprise</a>
        </li>
        <li >
          <a  href="#">Support</a>
        </li>

        <li >
          <a  href="{% url 'logout' %}">Logout</a>
        </li>
        <li >
          <a  href="{% url 'dashboard' %}">Dashboard</a>
        </li>

        <li >
          <a  href="{% url 'login' %}">Login</a>
        </li>
        <li >
          <a  href="{% url 'landingpage:register' %}">Sign Up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

As I was reading through my own question I realized I had made a, now obvious, mistake. Instead of deleting the question I'm posting the answer in case someone else searching may have overlooked a display property leftover from a previous iteration.

d-none was mistakenly left within the link tags. Display Property classes can be very handy to hide elements on different display sizes. However, d-none will hide an element in any size. In my case, combined with d-md-inline-block allowed the links to be displayed prior to collapse, but after collapse d-none took over and hid the links.

As stated in the Bootstrap 4 docs on Display Properties (which I apparently overlooked in my search);

"To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation. To show an element only on a given interval of screen sizes you can combine one .d-x-none class with a .d-x-x class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices."

CodePudding user response：

You need to import boostrap.js and jquery.

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>