Can't click on link with CSS animated background-CodePudding

I'm doing this homework assignment on CSS animations and I need to add navigation to all pages.

One of my pages has an animated background throughout the whole page. I've added a link that's supposed to take the user back to the home page, yet this link can't be clicked or hovered on?

Here's my HTML:

<div class="nav">
     <nav>
          <ul>
               <li><a href="index.html">Motion Samples</a></li>
          </ul>
     </nav>
</div>

CodePudding user response：

confirm u are allready other page  not in index



  <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">add pets</a>
        </li>
        {% if user.is_authenticated %}

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            {{user}}

          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="{% url 'account_email' %}">Change E-mail</a>
            </li>
            <li><a class="dropdown-item" href="{% url 'account_change_password' %}">Change Password</a></li>

            <li><a class="dropdown-item" href="{% url 'account_logout' %}">Sign Out</a></li>
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>


        {% else %}

        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_login' %}">Sign In</a>

        </li>

        <li class="nav-item">
          <a class="nav-link" href="{% url 'account_signup' %}">Sign Up</a></li>
        </li>

        {% endif %}
      </ul>

      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>

    </div>

CodePudding user response：

Turned out to be an issue with the z-index on my div container! :)