NavBar not collapsing

[KevFinn]

The Responsive Header is not properly collapsing into the accordion icon. The 'Docs | Examples | Blog' links in the header should be hidden behind the accordion icon upon a browser collapse. Is anyone else seeing this? I'm getting the error on all browsers / OS's.

Desktop:

Mobile:

[adamwathan]

That's how it's supposed to look; it's showing the expanded nav bar (when the nav bar is open).

[KevFinn]

I apologize if I'm not understanding the usability of the navbar, but how do you make it collapse so that the menu items are incorporated into the accordion icon? With Bootstrap 4, all items in the navbar are hidden upon collapse in the examples:

https://getbootstrap.com/docs/4.0/components/navbar/

That is the effect I'm trying to implement.

[adamwathan]

I've updated the example to show both closed and open states:

To open/close the navbar you would need to write some JavaScript to toggle between the block and hidden classes on this wrapper for the menu items:

<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
  <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>

Tailwind is just a CSS framework and doesn't provide any built-in JS components or anything like Bootstrap; so you would be on the hook for implementing that however you like.

Here's an interactive version of that example built using Vue:

https://jsfiddle.net/adamwathan/o1uotjxk/

[KevFinn]

Oh man, this is exactly what I was looking for. After "Refactoring to Collections" and "TDD Laravel" I assume that Tailwind is going to be awesome as well, this will definitely be the use case to get me using it. Thanks!

[gavinhewitt]

To open/close the navbar you would need to write some JavaScript to toggle between the block and hidden classes on this wrapper for the menu items:

This should be in the docs. I was mistakenly expecting the responsive header example to be working too.

[israteneda]

For me works adding inline javascript onclick="toggle()" to menu button and adding id="menu" to navbar menu, and this script:

<script>
  const menu = document.getElementById('menu');
  const toggle = () => menu.classList.toggle("hidden");
</script>

[rowanD72]

After debugging in Google Chrome, I found that if you add "hidden" to the last div before your anchor tags (). Then upon loading you menu will be hidden and able to toggle. If you can't seem to find that line of code, open Google tools and toggle the burger menu and it show light up in the elements panel. Find that line of code and add hidden.

[LucidDan]

I wasted a little time on this because this isn't explicitly documented that you need to wire up the Javascript yourself. I realised it fairly quickly, but Bulma for example does a good job of making it very clear in these kind of examples that some extra work is required, would be good if this example mentioned the same caveat.