I poured a cup of coffee and went to my site without logging in. I had worked on it till the wee hours of the morning and wondered if I’d still like the layout. As it turned out, it was awhile before I could check it because the site was broken. Formatting missing, fonts wrong, and a whole little navigation area on each blog post completely askew. I nearly had a heart attack.
As it turned out, it was the Nitropack plugin. Its cache needed to be cleared, then all was well. Except me, I guess. I’m still a little shaken from the horror. Nitropack is amazing about speeding up the site, but I will clear its cache at the end of every work session now.
Since the subject arose, I should mention some details about the little navigation area on my posts. It looks simple but I’m really proud of it because it is custom styled – and it wasn’t easy. I altered the built-in breadcrumbs to look more interesting than a basic line of text links. Now, you’d never know they are a heavily modified versions of the Yoast SEO breadcrumbs. The links it generates are in buttons and the current post title rests beneath them. It was a little more slippery than styling a normal link because people don’t usually do this with the breadcrumbs and there’s nothing built in to help.
The “previous post” and “next post” links that are above them were even harder to style. I was altering the built-in “post navigation” widget. Now, its links are in shiny round buttons that slide left or right when you hover over one. Since I almost never write CSS animation code, it took me a good long while to make that work. I mean a really long time, especially considering it’s a very simple animation. It will be awhile before I don’t hover over them several times, just to watch them move.
I spent a lot of time on the header, too. I had implemented a fancy custom highlight I learned from a Kevin Powell tutorial. That, too, took a long time to implement but I did learn new things. Then, after two days, it wore on me and I decided I didn’t like it. I removed it and made the header links look like the breadcrumb buttons. That was pleasing for about two hours then I realized it made the header look heavy and it overwhelmed every page. Now, the header is back to being as simple as I can make it, and I’m liking it again. I hope it lasts because I’m tired of working on that area.
I usually avoid CSS tutorials by Kevin Powell because he doesn’t care much about browser compatibility. He always uses whatever is latest and greatest, and that excludes some visitors because they can’t see the results. But I couldn’t resist this trick and even though it’s gone now, I’m glad I went through the exercise of adding it.