13 February 2025 Jekyll Tailwind Navbar

I wanted to update the navbar on my personal website. I think it looked fine, but there were some issues on smaller screens and mobile.

I’ve seen other examples of people using these navbars in more complex (and reasonable) ways, such as in full Rails applications using StimulusJS. If that’s your use case, then this article is not for you. You may want to check out Matt Swanson’s Tailwind style CSS transitions with StimulusJS article or even Chris Oliver’s tailwindcss-stimulus-components package for simple Tailwind components like this.

Here’s a couple of examples of what I mean:

I’ve used a Tailwind UI component, with a few tweaks. This component even had other dropdown elements that I removed and did not even consider.

The main change was that this was mobile friendly and required javascript, which Tailwind do not provide. (Source)

It’s very minor, but that’s why this article exists. The navbar component comes with lots of extra confusing code, but it’s actually quite simple. A standard nav, a mobile/smaller screen and a typical burger (3 line SVG), all with some premade classes and styles.

I use Jekyll and the navbar is on every page of my personal website, so I added my own javascript directly into my _includes/head.html file:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const menuToggle = document.getElementById("menu-toggle");
    const mobileMenu = document.getElementById("mobile-menu");
    menuToggle.addEventListener("click", function () {
      mobileMenu.classList.toggle("hidden");
    });
  });
</script>

A very simple, add and remove the hidden class from the relevant elements.

The end result

Full:

Expanded:

Collapsed:

Video: click for Github link!

Some gotchas

• The component already came with mobile-menu, but I had to add menu-toggle myself.
• I had issues with the hover effect on the smaller menu. I noticed this on my laptop, in a “mobile view” in my browser, so I didn’t fix this at all. I figured anyone on mobile wouldn’t be hovering.
• Worth testing this on your mobile. I noticed that the burger icon didn’t show at all without passing height and width options to the SVG icons.

TL:DR

Make sure the right elements have a id and just toggle the hidden class on click.