# Benutzerdefinierte Kopfzeilen-Links

**URL:** <https://meta.discourse.org/t/custom-header-links/90588>\
**Category:** Theme component\
**Tags:** official, custom-header-links\
**Created:** [24. Juni 2018 um 10:22 UTC](https://meta.discourse.org/t/custom-header-links/90588 "2018-06-24T10:22:32Z")\
**Posts on this page:** 1\
**Showing post:** 132

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [16. November 2021 um 19:04 UTC](https://meta.discourse.org/t/custom-header-links/90588/132 "2021-11-16T19:04:11Z")

</div>

[quote=“Nick\_Chomey, post:131, topic:90588”]  
Drag and drop oder Auf/Ab-Schaltflächen wären für zukünftige Benutzer (oder zukünftige Bearbeitungen) sehr nützlich.  
[/quote]Sie können die Reihenfolge bereits sehr einfach mit einigen Zeilen CSS manipulieren, da wir die `flex`-Eigenschaft verwenden.

Z.B.:

- Standardreihenfolge  
 ![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/3X/e/1/e19d8d2de9080baf47fa9c60613a059d620f8d25_2_517x56.png)

- Benutzerdefinierte Reihenfolge  
 ![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/optimized/3X/2/e/2ececf3e8331a761e2f1b540ac9f73612bcbd7fe_2_517x53.png)

CSS-Beispiel:

```css
.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;
  }

  &:nth-child(2) {
    order: 1;
    background: green;
  }

  &:nth-child(3) {
    order: 2;
    background: yellow;
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/custom-header-links/90588)._