# Hamburger Menu Functionality

**URL:** <https://forum.pinegrow.com/t/hamburger-menu-functionality/4585>\
**Category:** Beginners\
**Created:** [October 5, 2020, 11:35pm UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585 "2020-10-05T23:35:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alandestoy](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@alandestoy](https://forum.pinegrow.com/u/alandestoy)\
**Post date:** [October 5, 2020, 11:35pm UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585/1 "2020-10-05T23:35:15Z")

</div>

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 🙂 Thank you!

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [October 6, 2020, 10:15am UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585/2 "2020-10-06T10:15:35Z")

</div>

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 - [https://tailwindcss.com/components/navigation](https://tailwindcss.com/components/navigation)  
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.

```auto
<script>
            let hamburger = document.getElementById('hamburgerbtn');
        
            let mobileMenu = document.getElementById('menublock');
        
            hamburger.addEventListener('click', function(){
                mobileMenu.classList.toggle('hidden');
            });
        </script> 

```

Hope this helps!  
Bob

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [October 6, 2020, 4:48pm UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585/3 "2020-10-06T16:48:55Z")

</div>

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

**CSS:**

```auto
/* ====== BURGER TOGGLE ====== */

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

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

.burger:hover,
.burger:focus {
    cursor: pointer;
}

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

.burger-patty:before,
.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);
}

```

**HTML:**

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

```

---

<div class="post-metadata">

**Author:** ![alandestoy](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@alandestoy](https://forum.pinegrow.com/u/alandestoy)\
**Post date:** [October 7, 2020, 6:56pm UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585/4 "2020-10-07T18:56:56Z")

</div>

> [@RobM](#):
>
> ```auto
> <script>
> let hamburger = document.getElementById('hamburgerbtn');
>         
> let mobileMenu = document.getElementById('menublock');
>         
> hamburger.addEventListener('click', function(){
> mobileMenu.classList.toggle('hidden');
> });
> </script> 
> 
> ```

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.

Cheers,  
Augusto

---

<div class="post-metadata">

**Author:** ![alandestoy](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@alandestoy](https://forum.pinegrow.com/u/alandestoy)\
**Post date:** [October 7, 2020, 7:30pm UTC](https://forum.pinegrow.com/t/hamburger-menu-functionality/4585/5 "2020-10-07T19:30:13Z")

</div>

> [@droidgoo](#):
>
> `ccc`

Hi @droidgoo,

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

Cheers,  
A