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

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

「いいね！」 4
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
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
11

Ah yes, I always forget the inspect feature.

Perfect, thank you!

「いいね！」 2
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