Hamburger Menu Functionality

Hi guys, total newbie here coming from Adobe Muse. I’ve created a Tailwind enhanced basic HTML site (no bootstrap or Wordpress), and I need to add functionality to a hamburger menu button located as a traditional navigation bar button for the mobile media queries. For the life of me, I’ve tried interactions, a separate javascript file, etc., to no avail. I wish something so basic was a tutorial on the support site. Please help :slight_smile: Thank you!

Hi @alandestoy,
Welcome! There are a couple of different ways that you can do this in Tailwind. The Tailwind docs actually have the markup for a basic nav menu -
Basically, you have a block with your hamburger in it that gets a class like ‘md:hidden’ and an id of ‘hamburgerbtn’, and another block containing all your menu items, with classes of ‘hidden’ and ‘md:block’ and an id of ‘menublock’.
Finally, a little bit of JavaScript to show/hide your menu block at that medium breakpoint.

            let hamburger = document.getElementById('hamburgerbtn');
            let mobileMenu = document.getElementById('menublock');
            hamburger.addEventListener('click', function(){

Hope this helps!

you could do this with just an input toggle and CSS… i think it’s rather fetching.


/* ====== BURGER TOGGLE ====== */

#tmm {
    position: absolute;
    left: -9999px;

.burger {
    background: #ccc;
    display: inline-block;
    padding: 24px 14px;

.burger:focus {
    cursor: pointer;

.burger-patty {
    width: 18px;
    height: 3px;
    position: relative;
    display: block;
    background: #333;

.burger-patty:after {
    background: #333;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: all 800ms ease-in;

.burger-patty:before {
    top: 5px;

.burger-patty:after {
    top: -5px;

/* ====== CHECK BEHAVIOR ====== */

#tmm:checked ~ .main-menu {
    display: block;

#tmm:checked ~ .burger .burger-patty {
    background: transparent;

#tmm:checked ~ .burger .burger-patty:before {
    top: 0;
    transform: rotate(-315deg);

#tmm:checked ~ .burger .burger-patty:after {
    top: 0;
    transform: rotate(315deg);


  <input id="tmm" type="checkbox">
  <label aria-haspopup="true" for="tmm" class="burger">
    <span class="burger-patty" aria-label="submenu"></span>

Hi @RobM,
Thank you so much for helping with this! This worked out just fine! It’s a bit “out of process” because it required to get into the code file itself, but a great way to get new experience. Thanks again! I’m sure this will help others like me along the way as well.


Hi @droidgoo,

This also worked out pretty well! Thank you for sharing, really appreciate the help!


1 Like