Rearrange Existing Hamburger Menu Items

UX
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
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
Screen Shot 2019-07-16 at 11.20.58 PM.png818Ă—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