Custom Header Links

You can already manipulate the order very easily with some lines of CSS since we use the flex property.

E.g.:

  • Default order
    image

  • Custom order
    image

CSS example:

.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;
  }
}
5 Likes