# 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:** 19
**Page:** 1
### Author:  [@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")
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.
```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
}
```
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [August 20, 2023, 8:04pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/2 "2023-08-20T20:04:09Z")
Thank you for this! I would also suggest that the X Close button be moved to inside the Menu itself, at the very top. (In that position I would also add “Close Menu” text to the button, and perhaps use a left-pointing arrow instead of the X.)
← Close Menu or \<\< Close Menu
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 22, 2023, 2:20pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/3 "2023-08-22T14:20:06Z")
I think most people use Discourse with the sidebar always enabled (I’d be curious to see stats on various forums). Having a large X that encourages, sort of speaking, of closing a part of the layout that is basically permanent for many users would look a bit weird to me. 🤔
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [August 24, 2023, 12:18pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/4 "2023-08-24T12:18:45Z")
I agree that having the little-used hamburger-to-close icon taking up the most valuable upper left easy target space on the window is non-optimal.
Here’s what cloudflare has at the bottom of their sidebar:
Seems like someone who knew a bit more than I about CSS (or maybe the DOM?) could make a theme component pretty quickly, but probably the thing is a PR that fixes the template.
It could even be the top item in the sidebar. . .
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 24, 2023, 12:26pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/5 "2023-08-24T12:26:24Z")
How do you open it again if the button is in the collapsed sidebar?
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [August 24, 2023, 12:32pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/6 "2023-08-24T12:32:17Z")
doh!
You make a really good point!
I never said I was a UX guy.
. . . hmm . . . OK
What they do is have the sidebar get collapsed like this:
and the thing at the bottom expands it.
So maybe collapsing the sidebar rather than removing it is a solution. Then if you know what the icons/colors are, you can use it without having it expanded.
Pretty much every site makes the home/icon at the upper left, and having the hamburger there seems wrong.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 24, 2023, 12:34pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/7 "2023-08-24T12:34:37Z")
I know this is a different thing but I suspect the side-burger icon is still top right in mobile because on a small touchscreen, I can see tapping the logo by mistake would be a common thing if it were top left beside like on desktop view. Although same could be said about it being near avatar and search icons. 🤷🏻♀️
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 24, 2023, 12:37pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/8 "2023-08-24T12:37:59Z")
Ah yes, that makes sense. I think Googlemail have similar, though they keep the hamburger button in the top left:
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [August 24, 2023, 12:39pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/9 "2023-08-24T12:39:57Z")
With this theme you can see that the hamburger is on a sidebar, though, so it’s sort-of not the upper left corner:
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 24, 2023, 12:41pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/10 "2023-08-24T12:41:32Z")
FWIW I prefer top left for UX designs balance and appearance and have no issue with its open-collapse functionality.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [August 24, 2023, 12:46pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/11 "2023-08-24T12:46:32Z")
I’ve not really played with it before, but it also has an ‘expand on hover’ thing going on too which is quite nice.
I think they have a more distinctive set of icons, which makes deciphering it when collapsed easier than a first glance at Meta’s one leads me to think. Though if you start adding in things like multiple labels then it does suffer the same ambiguity our tags might have:
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 24, 2023, 12:49pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/12 "2023-08-24T12:49:09Z")
no to hover tags and category names. hovering is not ideal for touchscreen interfaces either. using desktop mode with hover stufff on an iPad doesn’t really work well.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 30, 2023, 2:43am UTC](https://meta.discourse.org/t/hamburger-toggle/275948/13 "2023-09-30T02:43:31Z")
I like the hover, as long as the screen tap behaves the same as with a mouse.
Here’s one of my favorite style, on a highly customized Ghost CMS site I built for a client, where hovering anywhere over the sidebar slides open the vertical stack of click/tap links to reveal cascading submenus… it feels very smooth and easy to navigate. You can try it out here:
> **[Fisher Consulting Group](https://fisherconsultinggroup.com)**
>
> Creating high performance organizations, teams, and individuals
[ ](https://vimeo.com/869755646)
---
### Author:  [@PhilFoss](https://meta.discourse.org/u/PhilFoss)
#### Post date: [November 12, 2023, 3:30am UTC](https://meta.discourse.org/t/hamburger-toggle/275948/14 "2023-11-12T03:30:19Z")
Have you checked this on mobile? Very buggy
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 29, 2023, 9:55am UTC](https://meta.discourse.org/t/hamburger-toggle/275948/15 "2023-12-29T09:55:48Z")
Hello 👋 Thanks for sharing.
I use the indent, outdent icons combo to the sidebar toggle on my site.
[indent (show sidebar)](https://fontawesome.com/icons/indent?f=classic&s=solid)
[outdent (hide sidebar)](https://fontawesome.com/icons/outdent?f=classic&s=solid)
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [March 11, 2024, 7:26pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/16 "2024-03-11T19:26:36Z")
Another possibility (for desktop) is demonstrated on [Flarum](https://discuss.flarum.org)…
[ ](https://vimeo.com/922162294/9c127b5669)
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [June 1, 2025, 4:11pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/17 "2025-06-01T16:11:55Z")
I wonder if someone else thinks this needs to be taken up by the Core team.
There are a lot of top communities using the previous UI (with no sidebar) on Discourse because of that.
I found the sidebar super useful to organize large communities like ours, but the current behavior on Discourse is the opposite.
It feels like non-technical folks just don’t know how to use our forums because of small but significant details like this one.
There is always room to improve 🙂
Meanwhile I’m testing this Theme Component:
> [@F NAV - Mobile Navigation Tabs](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277):
>
> information_sourceSummary F NAV - Mobile Navigation TabseyeglassesPreview [Theme Creator](https://discourse.theme-creator.io/theme/Don/f-nav-component)hammer_and_wrenchRepository [GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Hello wave Before, I have created a #Development [topic](https://meta.discourse.org/t/f-nav-theme-component-concept/340226) for it as a theme component concep…
---
### Author:  [@David\_Chao](https://meta.discourse.org/u/David_Chao)
#### Post date: [June 3, 2025, 4:36pm UTC](https://meta.discourse.org/t/hamburger-toggle/275948/18 "2025-06-03T16:36:04Z")
i have the same question too
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [April 17, 2026, 11:04am UTC](https://meta.discourse.org/t/hamburger-toggle/275948/19 "2026-04-17T11:04:16Z")
oh i made a theme component for this
> [@Dynamic Sidebar Icon](https://meta.discourse.org/t/discourse-dynamic-sidebar-icon/400765):
>
> information_sourceSummary Makes the sidebar toggle icon dynamic and customizablehammer_and_wrenchRepository [https://github.com/Lillinator/dynamic-sidebar-icon](https://github.com/Lillinator/dynamic-sidebar-icon)eyeglassesPreview [https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon](https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Install this theme component woman_technologist:t2 Overview A lightweight Discourse theme component that dynamically changes the header’s sidebar toggl…