Rearrange Existing Hamburger Menu Items

Contribute UX

AI-generated summary

In a UX-focused discussion titled “Rearrange Existing Hamburger Menu Items,” users explore whether pre-existing items like About or FAQ can be moved or hidden in Discourse’s hamburger menu. justin.noom initiates the thread asking about reordering or removing items such as Keyboard Shortcuts. codinghorror notes that rearrangement isn’t natively supported but removal via CSS in Admin > Customize is possible. awesomerobot provides a CSS snippet using flexbox to reorder sections (e.g., moving footer links to the top) and hide specific items like Keyboard Shortcuts. justin.noom asks if individual links like About can be moved between sections, to which awesomerobot clarifies CSS can’t move links across sections — only entire containers. justin.noom then considers deleting sections and recreating links via a custom theme (custom-hamburger-menu-links/87644), which MartyMeh confirms works well. MartyMeh also asks how to hide top-level menu items; awesomerobot advises using browser DevTools to find class names (e.g., .latest-topics-link) and hiding them with display: none. rahim123 inquires about customizing the sidebar-integrated hamburger menu, especially moving items out of the More expander — while not directly addressed, they successfully hide the About link using .sidebar-section-link-about { display: none; }. The thread concludes with users successfully implementing CSS-based hiding and partial reordering, though true cross-section item movement remains unsupported.

1

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.

1 Like
2

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.

3 Likes
3

With CSS you can do something like…

.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.

8 Likes
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

You’re a life saver Kris, thanks so much!! So, similarly, I could use something like:

.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?

5

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).

3 Likes
6

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.

1 Like
7

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:

to create the About and FAQ links in the general section. A bit janky, but seemingly plausible.

3 Likes
8

That should work. I use that custom theme, it does the job nicely.

4 Likes
9

@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

3 Likes
10

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

58%20PM
58%20PM818Ă—328 28.9 KB

to hide it with CSS you’d do this

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 Likes
11

Ah yes, I always forget the inspect feature.

Perfect, thank you!

2 Likes
12

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:

.d-sidebar .sidebar-sections .sidebar-section-link li a.sidebar-section-link-faq{
  display: none;
}

Edit: OK this worked for hiding the “About” link:

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

Thanks a lot!

1 Like