Bestehende Hamburger-Menüpunkte neu anordnen

Beitragen UX
1

Ist es möglich, bereits vorhandene Elemente im Hamburger-Menü zu entfernen oder neu anzuordnen? Zum Beispiel, um „Über uns

1 „Gefällt mir“
2

Eine Neuanordnung des Menüs wohl nicht, aber das Entfernen von Elementen aus jedem Bereich der Benutzeroberfläche lässt sich in der Regel mit CSS-Regeln unter Admin > Anpassen durchführen.

3 „Gefällt mir“
3

Mit CSS können Sie etwas wie Folgendes tun…

.hamburger-panel .panel-body-contents {
  display: flex; /* Flex-Layout einrichten, um Elemente neu anzuordnen */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* Footer-Links nach oben verschieben */
    .keyboard-shortcuts-link {
     display: none !important; /* Link zu Tastenkürzeln ausblenden */
    }
  }
}

Möglicherweise müssen Sie einige andere Dinge anpassen (Rahmen, Abstände), aber ich denke, damit sind Sie zu 90 % auf dem richtigen Weg.

8 „Gefällt mir“
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

Du bist ein Lebensretter, Kris, vielen Dank!! Also, ähnlich könnte ich so etwas verwenden:

.hamburger-panel .panel-body-contents {
  display: flex; /* Flex-Layout einrichten, um Elemente neu anzuordnen */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* Footer-Links nach oben verschieben */
    .about-link {
    }
  }
}

wenn ich About oder FAQ in die allgemeinen Links statt in den Footer verschieben wollte?

5

Nein, CSS kann nur ganze Sektionen verschieben – du wirst keine Links in andere Sektionen verschieben können (ich glaube, das war deine Frage).

3 „Gefällt mir“
6

Spooky, ich bin gerade auf Meta hereingekommen, um genau diese Frage zu stellen, und sie steht ganz oben auf der Diskussionsliste. Wie sind die Chancen.

1 „Gefällt mir“
7

Ah, verstanden! Danke für die Klärung. Du hast recht – mein eigentliches Ziel war es, About und FAQ von footer nach general zu verschieben. Allerdings scheint es (basierend auf deinem ersten CSS-Beispiel) so, als könnte ich beide Abschnitte einfach löschen und dann etwas wie folgt verwenden:

um die Links About und FAQ im Abschnitt general zu erstellen. Etwas holprig, aber scheinbar machbar.

3 „Gefällt mir“
8

Das sollte funktionieren. Ich benutze dieses benutzerdefinierte Theme, es erledigt die Aufgabe sehr gut.

4 „Gefällt mir“
9

@awesomerobot, danke für deine Hilfe. Könnte ich ergänzend fragen, wie der Code aussehen könnte, um nur einige der Elemente im oberen Hamburger-Menü auszublenden?

Ich habe versucht, mit dem Code-Beispiel, das du hier gepostet hast, herumzuspielen, aber ich habe bisher keinen Erfolg gehabt.

Danke.

3 „Gefällt mir“
10

Wenn Sie mit der rechten Maustaste auf einen der Links klicken und „Untersuchen“ auswählen, sehen Sie die Klassennamen, die mit jedem verknüpft sind. So erhält beispielsweise der Link „Neueste“ den Klassennamen latest-topics-link.

58%20PM
58%20PM818×328 28.9 KB

Um ihn mit CSS auszublenden, gehen Sie wie folgt vor:

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 „Gefällt mir“
11

Ah ja, ich vergesse die Inspekt-Funktion immer.

Perfekt, danke!

2 „Gefällt mir“
12

Haben Sie Tipps zum Anpassen des Hamburger-Menüs, da es jetzt in die Seitenleiste integriert ist?

Gibt es eine Möglichkeit, Elemente aus dem Mehr-Expander zu verschieben, damit sie auf der obersten Ebene sichtbar sind?

Und was ist mit dem Ausblenden von Elementen? Ich habe dies ohne Erfolg versucht:

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

Bearbeiten: OK, dies hat funktioniert, um den Link “Über” auszublenden:

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

Vielen Dank!

1 „Gefällt mir“