# Responsive hamburger menu behavior

**URL:** https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367
**Category:** web dev
**Created:** [February 4, 2019, 5:21am UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367 "2019-02-04T05:21:10Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![PABLO\_SERRANO](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pablo_serrano/32/9480_2.png) [@PABLO\_SERRANO](https://forum.kirupa.com/u/PABLO_SERRANO)
#### Post date: [February 4, 2019, 5:21am UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/1 "2019-02-04T05:21:10Z")

</div>

The website uses the always responsive hamburger menu. I would like the hamburger menu to display open by default in the home page only showing the menu links.

What would be the correct way to display the hamburger menu open including the hamburger icon animation only in the home page?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [February 4, 2019, 9:27pm UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/2 "2019-02-04T21:27:03Z")

</div>

What causes your hamburger menu to appear when you click on it? Is it a CSS class value that gets added to display it in its expanded state?

---

<div class="post-metadata">

### Author: ![PABLO\_SERRANO](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pablo_serrano/32/9480_2.png) [@PABLO\_SERRANO](https://forum.kirupa.com/u/PABLO_SERRANO)
#### Post date: [February 4, 2019, 9:53pm UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/3 "2019-02-04T21:53:04Z")

</div>

The menu works as expected. I just want to display it open in the home page only. I am thinking to add the necessary css classes to the menu via javascript to the home page menu markup.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [February 4, 2019, 11:12pm UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/4 "2019-02-04T23:12:26Z")

</div>

Yep - that would work well. Another approach may be to use media queries and ensure the menu is in its expanded mode when there is available screen width. I prefer this approach over the JS one since your page has to run extra code that may cause a few moments where the menu’s size flashes from collapsed to visible. You can certainly mitigate that, but the media query approach seems much simpler.

🙂

---

<div class="post-metadata">

### Author: ![PABLO\_SERRANO](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pablo_serrano/32/9480_2.png) [@PABLO\_SERRANO](https://forum.kirupa.com/u/PABLO_SERRANO)
#### Post date: [February 4, 2019, 11:55pm UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/5 "2019-02-04T23:55:45Z")

</div>

Good point. The tricky part is changing the responsive menu icon animation via css. The responsive menu can display open by adding the class ul#menu display block. However this does affect the responsive menu icon animation. Using css how would you change the state of the responsive menu icon from closed to open?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [February 5, 2019, 8:02pm UTC](https://forum.kirupa.com/t/responsive-hamburger-menu-behavior/639367/6 "2019-02-05T20:02:17Z")

</div>

Can you post a link to your example? There are many hamburger menu implementations, so I’d like to take a look at the one you are working on.
