Reordering pinned posts

Help
1

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!

1 Like
2

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.

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

1 Like
3

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
image2236×996 359 KB

Custom CSS on the navbar:

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

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:

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.

5

Well, I’ve got it, I think.

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.

1 Like
6

Great work on this one and thanks for sharing!

1 Like