Wie steuere ich die Reihenfolge der Menüabschnitte in der Seitenleiste?

[Aurora]

Hi zusammen,

ich stoße auf ein Problem mit dem Seitenmenü in meinem Discourse-Forum. Die Reihenfolge der Abschnitte scheint festgelegt zu sein – wenn ich zum Beispiel zusätzliche benutzerdefinierte Abschnitte erstelle, erscheinen sie immer über dem Abschnitt „Kategorien“.

Für meine Community wäre es wichtig, diese benutzerdefinierten Abschnitte stattdessen unterhalb der Kategorien zu haben, aber ich kann keine Möglichkeit finden, diese Reihenfolge zu ändern oder zu steuern.

Gibt es eine Möglichkeit, die Position von Seitenmenü-Abschnitten zu verwalten, oder ist es derzeit nicht möglich, die Hierarchie/Reihenfolge dieser Blöcke anzupassen?

Vielen Dank im Voraus für jede Hilfe!

[Lilly (Lillian Louis)]

Hallo, Sie können die Reihenfolge der Seitenleistenabschnitte mit CSS steuern. Fügen Sie einfach eine neue Komponente mit folgendem CSS-Code hinzu. Gehen Sie zu Admin -> Themes & Komponenten -> Komponenten und erstellen Sie eine neue lokale Komponente

und fügen Sie diesen Code in den CSS-Tab ein, wobei custom-section-name der Slug-Name eines benutzerdefinierten Menüabschnitts ist:

.sidebar-wrapper {
  .sidebar-custom-sections {
    display: contents;
  }
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

Screenshot des CSS-Tabs

Sie müssen die Zahlen ändern und benutzerdefinierte Abschnitte zum obigen Code hinzufügen, um Ihren spezifischen Bedürfnissen gerecht zu werden. Es wird ungefähr so aussehen:

[Aurora]

Danke! Ich hatte gerade das gefunden und umgesetzt - aber mobil funktionierte es nicht

Rearrange Sidebar Order?

since the navigation menu sidebar-sections class is using the display = "flex" property you can do something like this - just change the numbers based on what order you want the sections to appear: in common css .sidebar-section-wrapper.sidebar-section[data-section-name="categories"] { order: 1; } .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { order: 2; } .sidebar-section-wrapper.sidebar-section[data-section-name="chat-dms"] { order: 3; } .sidebar-section-wrappe…

[Aurora]

hier war es wohl auch schon mal ein Thema - aber das funktioniert auch nicht

How to sort nav menu sections?

Hi @Lilly I used your CSS code to rearranged the order of the nav sections. It works well when the webpage in the full size. [image] However, I try to resize the webpage to a smaller width, the order settings in the CSS code are invaild. The last section turned to the second just like the following pic: [image] I found that the display: block; property of the sidebar-sections prevents the order from having an effect. Then, I try to add some code to the CSS code. .sidebar-sections…

[chapoi]

Die Klasse sidebar-wrapper wird auf Mobilgeräten durch sidebar-hamburger-dropdown ersetzt, glaube ich. Das Hinzufügen dieser Klasse sollte es also auch auf Mobilgeräten funktionsfähig machen:

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

[Aurora]

Danke! Habe es gerade ausprobiert - hat aber leider nicht funktioniert.

[chapoi]

Oh, noch eine Kleinigkeit: Das Seitenmenü verwendet anscheinend kein Flexbox auf Mobilgeräten. Das müsstest du also auch noch hinzufügen.

.sidebar-sections {
display: flex;
flex-direction: column;
}

[Aurora]

Vielen Dank!! Das funktioniert!! Super!

[rakekniven]

Der Header-Name meines benutzerdefinierten Abschnitts enthält ein Leerzeichen, z. B. „Hilfe für Benutzer“.

Ich habe versucht, data-section-name=“help users” zu verwenden, aber das funktioniert nicht.

Wie kann ich das Leerzeichen angeben? Muss hier eine Maskierung vorgenommen werden? Bitte helfen Sie

EDIT:
Nachdem ich die Website mit den Entwicklertools von FF inspiziert hatte, fand ich die Lösung: „help-users“.