Navbar opacity drops and disappears when clicking links rapidly using HTMX in Django

I am building a Django website where I use HTMX to load partial HTML content when clicking navbar links (instead of full page reloads).

The navbar itself is not supposed to change, only the main content area is swapped using HTMX.

However, I am encountering a strange issue:

• When I click a navbar link normally, it usually works fine

• If I click multiple links quickly, the navbar’s opacity drops and it eventually disappears

• The issue seems cumulative, as repeated or rapid clicks make the problem more noticeable

I am not explicitly changing the navbar’s opacity in JavaScript, and the navbar is not part of the hx-target being swapped.

What I’ve checked

• The navbar HTML is outside the HTMX swap target

• No JavaScript is manually modifying navbar styles

• The issue only happens when using HTMX navigation

• It does not happen with full page reloads

  <nav class="fixed top-0 left-0 w-full z-50 px-6 py-4 bg-transparent">
    <div class="max-w-7xl mx-auto flex justify-between items-center relative">
  
      <!-- Logo -->
      <div class="flex items-center gap-2 fade-left">
        <div class="w-8 h-8 rounded-lg bg-linear-to-br from-red-500 to-pink-500 flex items-center justify-center">
          <i data-lucide="languages" class="w-5 h-5 text-white"></i>
        </div>
        <a 
          href="{% url 'home' %}"
          hx-get="{% url 'home' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
          class="text-xl font-bold text-white"
        >
          NativeTube
        </a>
      </div>
  
      <!-- Mobile Menu Button -->
      <button
        id="mobile-menu-btn"
        class="md:hidden text-white text-2xl focus:outline-none"
        aria-label="Open menu"
      >
        ☰
      </button>
  
      <!-- Desktop Menu -->
      <div class="hidden md:flex items-center gap-6 fade-right">
        <a 
          class="text-white/70 hover:text-white" 
          href="{% url 'features' %}"
          hx-get="{% url 'features' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
        >
          Features
        </a>
        <a 
          class="text-white/70 hover:text-white" 
          href="{% url 'languages' %}"
          hx-get="{% url 'languages' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
        >
          Languages
        </a>
        <a 
          class="text-white/70 hover:text-white"
          href="{% url 'pricing' %}"
          hx-get="{% url 'pricing' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
        >
          Pricing
        </a>
  
        {% if user.is_authenticated %}
        <a 
          href="{% url 'logout' %}"
          class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 text-white"
        >
          Sign Out
        </a>
        {% else %}
        <a 
          href="{% url 'login' %}"
          class="px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 text-white"
        >
          Sign In
        </a>
        {% endif %}
      </div>
  
      <!-- Mobile Menu -->
      <div
        id="mobile-menu"
        class="hidden md:hidden absolute top-full left-0 w-full mt-4
               bg-slate-900/95 backdrop-blur-xl border border-white/10
               rounded-2xl overflow-hidden shadow-xl"
      >
        <a 
          href="{% url 'features' %}"
          hx-get="{% url 'features' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
          class="block px-6 py-4 text-white hover:bg-white/10"
        >
          Features
        </a>
        <a
          href="{% url "languages" %}"
          hx-get="{% url 'languages' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
          class="block px-6 py-4 text-white hover:bg-white/10"
        >
          Languages
        </a>
        <a
          href="{% url "pricing" %}"
          hx-get="{% url 'pricing' %}"
          hx-target="#page-content"
          hx-swap="innerHTML"
          hx-push-url="true"
          class="block px-6 py-4 text-white hover:bg-white/10"
        >
          Pricing
        </a>
  
        {% if user.is_authenticated %}
        <a href="{% url 'logout' %}" class="block px-6 py-4 text-pink-400 hover:bg-white/10">
          Sign Out
        </a>
        {% else %}
        <a href="{% url 'login' %}" class="block px-6 py-4 text-pink-400 hover:bg-white/10">
          Sign In
        </a>
        {% endif %}
      </div>
  
    </div>
  </nav>
  
  
  

• The navbar itself is included in base.html and is not part of the #page-content HTMX swap target.

• I have also used gasp for animations.

• gsap.from(".fade-left", { x: -40, opacity: 0, duration: 1 })
    gsap.from(".fade-right", { x: 40, opacity: 0, duration: 1 })
  

Вернуться на верх