Next and Previous Links

Hi there,

try this CSS just update the color and background-color properties:

.nav-links .page-numbers {
    display: inline-block;
    min-width: 30px;
    line-height: 39px;
    text-align: center;
    border-radius: 2px;
}

.nav-links .next.page-numbers, .nav-links .prev.page-numbers {
    width: auto;
    padding: 0 20px;
}

.nav-links .page-numbers {
    background-color: #0b0521;
    color: #fff;
}

.nav-links .page-numbers:hover {
    background-color: #383f49;
    color: #fff;
}

David,

Thank you for a quick response. I have added some CSS to the post navigation too https://myblogginghelp.com/cms-tips-and-tricks/build-a-website-without-coding.html.

nav#nav-below {
    margin-top: inherit;
}
.nav-previous .prev {
    max-block-size: 35%;
    float: left;
    padding: 15px 10px;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
	max-width: 35%;
	font-size: large;
}

.nav-next .next {
    max-block-size: 35%;
    float: right;
    padding: 15px 10px;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    max-width: 35%;
	font-size: large;
}

These are the links for Previous and Next Posts.

My ask is, can we have some hover effect (Font Color Goes white and the background turns to the blue similar to the main menu container) and also make the entire box inside the border clickable. Currently, I have to move the mouse on the link text to click.

I am looking forward to hearing from you soon.

Hi there,

That URL doesn't seem to be working - can you double check?

Dear Tom,

Thank you for your response. I was testing tuning the site. it is now available.
Please check.

Best Regards,
Syed H

Pasting the link again Click here to open

You could try something like this:

#main .post-navigation {
    display: flex;
    overflow: visible;
}

.post-navigation a {
    display: block;
    font-size: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    height: 100%;
}

.post-navigation a:hover {
    border-color: #666;
}

.post-navigation .next {
    margin-left: 20px;
    display: block;
}

.post-navigation .prev {
    margin-right: 20px;
    display: block;
}

.nav-previous .prev:before,
.nav-next .next:before {
    display: none;
}

Dear Tom,

Thank you for your helpful response. This worked perfectly.

Best Regards,
Syed H

No problem :)