There's a navigation bar on the blog pages now! It took a few tries to get it to work the way I want. I was working off of a css recipe for a bar that's fixed to the top of the browser window, and while it did show me how to get the buttons done, I would rather have one at the top of the page that scrolls away, followed by another at the bottom of the page. It's working that way now, but I struggled with positioning the bar flush with the top corner of the window. It turns out that body elements have a default margin of 6px. This is probably dependent on the browser. (I typically use Chrome.) In any case, just setting body { margin: 0; padding: 0; } let me put it where I want, and then setting a height for the ul around it made it so it would stop overlapping the first entry.
The more interesting challenge came when I decided to include some title text, which I want to stay centered on the page no matter how many buttons are to the right or to the left. Here's the relevant css:
ul.nav {
top: 0;
left: 0;
width: 100%;
height: 3em;
position: relative;
}
.abs-center {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.nav li p {
display: block;
margin: 0;
padding: 1em;
}
The abs-center class needs to be called on the li element. Originally I had tried to put all the styles inside the p element, thinking that its absolute position would be specified relative to the container with position: relative. It turns out that the p only moved relative to its parent li in that instance. Now it should be working, and I can add as many left-aligned or right-aligned buttons as a reasonable window will hold while keeping that text right in the center.
The eventual goal for this is to have blog entries span multiple pages. I'm thinking one page for each month. The nav bar will have buttons to move back and forth between the months, and the title will tell you when you are. I'm sure I'll implement this as soon as I actully have entries from multiple months to manage.