# Hamburger toggle

**URL:** <https://meta.discourse.org/t/hamburger-toggle/275948>\
**Category:** UX\
**Created:** [August 20, 2023, 7:37pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948 "2023-08-20T19:37:31Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![PhilFoss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/philfoss/32/320062_2.png) [@PhilFoss](https://meta.discourse.org/u/PhilFoss)\
**Post date:** [August 20, 2023, 7:37pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/1 "2023-08-20T19:37:31Z")

</div>

Hello, I’m new to Discourse and hope this is a helpful observation- the hamburger menu never changes to a ‘close’ ui so I’ve found myself clicking it thinking I’m about to reveal more stuff, but it closes unexpected. It was already open. I’ve got a few lines of css that I plan on adding as a topic in the ‘theme component’ category when I have more access. Luckily the codebase has proper classes so we can hook onto those based on the sidebar showing or not showing.

![discourse-hamburger-toggle](https://global.discourse-cdn.com/meta/original/4X/8/9/1/891de0de42ce65dd95758f272bf1d5bc291c401c.gif)

```plaintext
.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}

```

---

_[View the full topic](https://meta.discourse.org/t/hamburger-toggle/275948)._