# Rearrange Existing Hamburger Menu Items
**URL:** https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098
**Category:** UX
**Created:** [July 16, 2019, 4:33pm UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098 "2019-07-16T16:33:47Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@justin.noom](https://meta.discourse.org/u/justin.noom)
#### Post date: [July 16, 2019, 4:33pm UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/1 "2019-07-16T16:33:48Z")
Is it possible to remove/rearrange pre-existing items that are on the Hamburger Menu? For example, moving `About` or `FAQ` to the top, removing `Keyboard Shortcuts`, etc.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [July 17, 2019, 12:06am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/2 "2019-07-17T00:06:53Z")
Rearrangement of the menu, probably not, but removing items from any aspect of the UI can usually be done with CSS rules in Admin, Customize.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 17, 2019, 1:26am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/3 "2019-07-17T01:26:55Z")
With CSS you can do something like…
```css
.hamburger-panel .panel-body-contents {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
.menu-container-footer-links {
order: -1; /* moves footer links to top */
.keyboard-shortcuts-link {
display: none !important; /* Hide keyboard shortcut link */
}
}
}
```
You might need to adjust some other things (borders, spacing), but I think this would get you 90% of the way there.
---
### Author:  [@justin.noom](https://meta.discourse.org/u/justin.noom)
#### Post date: [July 17, 2019, 1:43am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/4 "2019-07-17T01:43:26Z")
You’re a life saver Kris, thanks so much!! So, similarly, I could use something like:
```plaintext
.hamburger-panel .panel-body-contents {
display: flex; /* Setup a flex layout so you can reorder things */
flex-direction: column;
.menu-container-footer-links {
order: -1; /* moves footer links to top */
.about-link {
}
}
}
```
if I were to move `About` or `FAQ` to the general links vs. footer?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 17, 2019, 1:51am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/5 "2019-07-17T01:51:30Z")
No, CSS can only go as far as moving entire sections around - you won’t be able to move links to different sections (I think that’s what you’re asking anyway).
---
### Author:  [@MartyMeh](https://meta.discourse.org/u/MartyMeh)
#### Post date: [July 17, 2019, 1:57am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/6 "2019-07-17T01:57:28Z")
Spooky, I just came to meta to ask this exact question, and it’s at the top of the discussion list. What are the chances.
---
### Author:  [@justin.noom](https://meta.discourse.org/u/justin.noom)
#### Post date: [July 17, 2019, 2:09am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/7 "2019-07-17T02:09:20Z")
Ah, gotcha! Thank you for the clarification. You are correct - my end goal was to move `About` and `FAQ` from `footer` to `general`, although it seems as though (based on your initial CSS example) I can _delete_ both sections and then use something like this:
> [@Custom Hamburger Menu Links](https://meta.discourse.org/t/custom-hamburger-menu-links/87644):
>
> discourse2Summary Custom Hamburger Menu Links will allow you to easily add links to the hamburger menu.eyeglassesPreview [Preview on theme-creator.discourse.org](https://theme-creator.discourse.org/theme/awesomerobot/hamburger-links)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-custom-hamburger-links](https://github.com/discourse/discourse-custom-hamburger-links)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 Samples Desktop Mobile Settings You add links via comma delimited values in…
to create the `About` and `FAQ` links in the `general` section. A bit janky, but seemingly plausible.
---
### Author:  [@MartyMeh](https://meta.discourse.org/u/MartyMeh)
#### Post date: [July 17, 2019, 2:38am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/8 "2019-07-17T02:38:08Z")
That should work. I use that custom theme, it does the job nicely.
---
### Author:  [@MartyMeh](https://meta.discourse.org/u/MartyMeh)
#### Post date: [July 17, 2019, 2:50am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/9 "2019-07-17T02:50:53Z")
@awesomerobot, thanks for your help. Could I add to this by asking what the code might look like to just hide some of the items in the top hamburger menu?
I have tried playing around with the code example you have put here, but am not having any luck.
Thanks
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 17, 2019, 3:22am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/10 "2019-07-17T03:22:59Z")
If you right click on one of the links and select inspect, you’ll see class names associated with each one… so for example, the “latest” link gets `latest-topics-link`
to hide it with CSS you’d do this
```css
.menu-panel li a.widget-link.latest-topics-link {
display: none;
}
```
---
### Author:  [@MartyMeh](https://meta.discourse.org/u/MartyMeh)
#### Post date: [July 17, 2019, 3:54am UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/11 "2019-07-17T03:54:46Z")
Ah yes, I always forget the inspect feature.
Perfect, thank you!
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [January 13, 2023, 2:52pm UTC](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/12 "2023-01-13T14:52:01Z")
Any tips on customizing the hamburger menu now that it’s integrated into the sidebar?
Is there any way to move items out of the **More** expander to be visible at the top level?
~~And what about hiding items? I tried this with no success:~~
```plaintext
.d-sidebar .sidebar-sections .sidebar-section-link li a.sidebar-section-link-faq{
display: none;
}
```
_ **Edit:** _ OK this worked for hiding the “About” link:
```plaintext
.sidebar-wrapper li a.sidebar-section-link-about {
display: none;
}
```
Thanks a lot!