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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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

4개의 좋아요

@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개의 좋아요

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개의 좋아요

Ah yes, I always forget the inspect feature.

Perfect, thank you!

2개의 좋아요

사이드바에 통합된 햄버거 메뉴를 커스터마이즈하는 방법에 대해 팁을 주실 수 있나요?

더 보기 확장 메뉴의 항목을 최상위 레벨에서 보이도록 이동할 수 있는 방법이 있을까요?

항목을 숨기는 방법은 어떻게 될까요? 아래처럼 시도해 봤지만 성공하지 못했습니다:

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

수정: “정보” 링크를 숨기는 데는 아래 코드가 작동했습니다:

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

많은 도움 부탁드립니다!

1개의 좋아요