animationtextmenutailwind-cssnavbar

Navbar Animated Text Logo on scroll moving menu items

Here is a .gif of what I am doing:

navbar issue

As you can see when the logo animates it shifts the menu items left and right, I have tried separating them by using navbar-start, navbar-center, and navbar-end to prevent this from happening, but as you can tell, nothing I did is working.

How can the logo stay animated without shifting the menu items left and right?

I am using Tailwind CSS.

Here is the code for the navbar:

document.getElementById('menu-toggle').addEventListener('click', function() {
    const menu = document.querySelector('.mobile-menu');
    menu.classList.toggle('active');
});
  .mobile-menu {
    transition: all 1s ease-in-out;
  }

  .mobile-links {
    color: #ffffff;
    font-size: 1.5rem;
  }

  .mobile-links:hover {
    color: #fffb00;
    font-size: 1.5rem;
  }

  .dark .mobile-links {
    color: #dbdbdb;
    font-size: 1.5rem;
  }

  .dark .mobile-links:hover {
    color: #ffdc16;
    font-size: 1.5rem;
  }

  .menulinks {
    color: #ffffff;
    font-size: 1rem;
  }

  .menulinks:hover {
    color: #fffb00;
    font-size: 1rem;
  }

  .dark .menulinks {
    color: #d4d3d3;
    font-size: 1rem;
  }

  .dark .menulinks:hover {
    color: #ff00d4;
    font-size: 1rem;
<nav class="menux glassmorphism p-4 backdrop-blur-2xl">
      <div class="container mx-auto flex flex-wrap justify-between items-center">
        <div class="navbar-start text-3xl font-bold logo-fire" aria-labelledby="Explode Logo"><h4 data-value="EXPLODE">EXPLODE</h4></div>
            <div class="navbar-center">
              <ul class="hidden md:flex md:space-x-6">
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Home">Home</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="About">About</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Services">Services</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Contact">Contact</a></li>
              </ul>
            </div>
        <div class="navbar-end">
              <div class="flex items-center">
                <label aria-label="Dark Mode Toggle" class="toggle-switch">
                  <input type="checkbox" id="darkModeToggle">
                  <span class="toggle-slider">
                    <span class="toggle-icons">
                      <span class="sun-icon">☀️</span>
                      <span class="moon-icon">🌙</span>
                    </span>
                  </span>
                </label>
                <button id="menu-toggle" class="md:hidden mm-icon ml-4">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                  </svg>
                </button>
              </div>
          <div class="mobile-menu md:hidden mt-4">
            <ul class="space-y-2">
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Home">🏠 Home</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="About">💎 About</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Services">🎹 Services</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Contact">🌎 Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

Solution

  • Try setting a fixed width to the logo container that has aria-labelledby="Explode Logo". If no fixed width it takes a dynamic width as auto which may cause the other elements beside it to adjust their widths to fit the entire navbar, thereby causing shifts in layout.