# Reordering pinned posts

**URL:** <https://discuss.write.as/t/reordering-pinned-posts/12171>\
**Category:** Help\
**Created:** [June 1, 2024, 3:10pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171 "2024-06-01T15:10:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![davepolaschek](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/51bf81/32.png) [@davepolaschek](https://discuss.write.as/u/davepolaschek)\
**Post date:** [June 1, 2024, 3:10pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/1 "2024-06-01T15:10:59Z")

</div>

I have a site I’m in the process of developing which will have roughly 30 pinned posts for navigation along the top. Since I’m not creating those posts in the order I want them to be displayed, is there an easier way than unpinning and re-pinning them in the correct order to change the order in which they appear?

Thanks!

---

<div class="post-metadata">

**Author:** ![davepolaschek](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/51bf81/32.png) [@davepolaschek](https://discuss.write.as/u/davepolaschek)\
**Post date:** [June 4, 2024, 7:48pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/2 "2024-06-04T19:48:21Z")

</div>

Well, solved, sort of. As @dino says, tweak the date of a post before unpinning it, and you’ll be able to find it quickly so you can repin it.

> **[How to Change Order of Write.as Pinned Pages](https://journal.dinobansigan.com/how-to-change-order-of-write-as-pinned-pages)**
>
> Just figured out how to change the order of the pinned pages on this write.as powered site. The order is based off when you pin a page. T...

Now I’m trying to figure how to move the pinned pages to the left, as a navigation sidebar.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [June 4, 2024, 11:10pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/3 "2024-06-04T23:10:12Z")

</div>

You can try these CSS rules for starters. Problem is, how to make the link show up in one column. At the moment, the links are just anchor elements under the nav bar. Even if I forced the width down, the first two links still show up on the same line.

 ![image](https://discuss.write.as/uploads/default/original/2X/1/1a7b5d6ea6cba34f778d666cd63fbdc742b82968.png)

Custom CSS on the navbar:

```css
position: absolute;
  top: 3em;
  left: 1.5em;
  width: 20px;

```

---

<div class="post-metadata">

**Author:** ![davepolaschek](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/51bf81/32.png) [@davepolaschek](https://discuss.write.as/u/davepolaschek)\
**Post date:** [June 5, 2024, 2:46pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/4 "2024-06-05T14:46:04Z")

</div>

Well, I’ve got it partly fixed. I’m fighting the fact that the default write.as style sheet (write.8fac221726b68760e79b7.css in my case) defines the left-margin to 1.5 for pinned.+pinned, which is what screws up the first items for you as well. Here’s the offending line:

```auto
body #post header nav a.pinned + .pinned, body #post header nav span.pinned + .pinned, body#collection header nav a.pinned + .pinned, body#collection header nav span.pinned + .pinned, body#post header nav a.pinned + .pinned, body#post header nav span.pinned + .pinned, body#subpage header nav a.pinned + .pinned, body#subpage header nav span.pinned + .pinned {
    margin-left: 1.5em
}

```

If I turn that off in Safari’s Web Inspector, everything looks good.

---

<div class="post-metadata">

**Author:** ![davepolaschek](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/51bf81/32.png) [@davepolaschek](https://discuss.write.as/u/davepolaschek)\
**Post date:** [June 5, 2024, 3:02pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/5 "2024-06-05T15:02:08Z")

</div>

Well, I’ve got it, I think.

```auto
a.pinned + .pinned {
    margin:0 !important;
}
header nav a {
    margin:0 !important;
}
a.pinned {
    display: block;
    align-content: center;
}

@media screen and (min-width: 480px) {
    nav:has(.pinned)
    {
        position: absolute;
        top: 3em;
        left: 3em;
        width: 100px;
        border-right: groove;
    }
}

```

And now it looks mostly like I wanted it to. I don’t like using the !important hammer, but I couldn’t figure another way to tap on just that spot.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [June 5, 2024, 6:35pm UTC](https://discuss.write.as/t/reordering-pinned-posts/12171/6 "2024-06-05T18:35:11Z")

</div>

Great work on this one and thanks for sharing!