Rearrange Existing Hamburger Menu Items

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

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

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.

7 Likes

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?

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

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

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

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

4 Likes

@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

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

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

Ah yes, I always forget the inspect feature.

Perfect, thank you!

2 Likes