Add link hover to page navigation

Hi Nicholas,

You can add a hover effect on the “previous post” and “next post” links by targeting .site-main .post-navigation a:hover, .site-main .paging-navigation a:hover in your custom CSS.

The following custom CSS, for example, would make the links purple (#663399) on hover:

site-main .post-navigation a:hover, .site-main .paging-navigation a:hover {
    color: #663399;
}

You can change the value of #663399 to any colour code of your choice and also add other rules within the CSS.

In case you’re not already aware: CSS should not be added directly to your theme’s files as any changes made there will be lost when it comes time to update. As you have Jetpack enabled, you can instead activate its custom CSS module and add via Appearance > Edit CSS. (Alternatively, you can create a child theme or activate a standalone CSS plugin.)

Let me know if that helps out or if any extra questions come up.

Thanks!

As an extra note: I got the above CSS from the theme’s demo site, as your username is linking to a site that’s using a different theme to Penscratch.

If the CSS doesn’t work correctly for you, please point me to the specific site and page that you’re trying to target.

Thanks for your response!

Unfortunately it did not work. I’ve tried that same exact code before and the links for the previous page and next page just remain black. But you can have a look.

Sorry, I forgot to mention the website.

https://nerw.in/

As for the child themes, I am aware of this and I’ve used a child theme with the penscratch theme before but I always have issues with it and that’s probably because I modified nearly every PHP file, so even if the parent theme was to update most likely all the code changes I’ve made in the php files will override the updated changes anyways haha.

But It’s something I’ll look into again but for now I’ll just have to be be careful not to update it (it hasn’t been updated for like a year anyways) and I make regular backups.

Thanks again for your help, I really appreciate it.

I ended up figuring it out. I added color to the wrong class which was overriding the hover effects. I removed that and I was able to able to acheive want I wanted easily.

Something so simple! ugh.

I’m happy to see you figured it out! CSS can be fiddly sometimes. ?? If you ever need a second set of eyes on anything else, please feel free to start another thread on these forums.