Tailwind CSS 导航栏

Question

No matter what, I cannot get this navbar to properly collapse. I need to change the navbar away from a flex in responsive mode, but it is currently not working.

HTML:

 <nav class="flex items-center justify-between flex-wrap bg-blue-darkest p-6 z-10">
    <div class="flex items-center flex-no-shrink text-white mr-6">
      <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
        />
      </svg>
      <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-white border-white hover:text-blue-darkest hover:bg-white"
        onclick="myFunction()">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
        </svg>
      </button>
    </div>
    <div class="w-full hidden lg:block flex-grow lg:flex lg:items-center lg:w-auto" id="nav">
      <div class="text-sm lg:flex-grow">
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
          Docs
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
          Examples
        </a>
        <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
          Blog
        </a>
      </div>
      <div>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
      </div>
    </div>
  </nav>

JavaScript code:

function myFunction() {
    var x = document.getElementById("nav");
    if (x.className === "hidden") {
        x.classList.toggle("hidden");
    } else {
        console.log("nav");
        x.className = "hidden";
    }
}

How can I fix this problem?

Answer 1

It's completely possible to use Tailwind CSS's responsive modifiers on display elements as well.

You can change your nav element's classes instead of just flex to something like md:flex block or similar. The correct display value and responsive utility you'll need to tune in on the actual site is by experimenting a bit, of course.

A quote from the Tailwind CSS wiki states:

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

You can read up more in the Tailwind CSS wiki .

In addition to this, here's a suggestion: you can shrink your myFunction down to just four lines of code. Currently, your if-else statement is just doing what classList.toggle already does, but manually. If the check was there because you wanted to check that you got the right element, then be aware that you should never, ever have multiple elements with the same id on a single page .

function myFunction() {
    var x = document.getElementById("nav");
    x.classList.toggle("hidden");
}