[Resolved] Styling Prev-Next arrows/buttons, thumbnails, and text

[Callista]

Hi there!
Sorry for opening so many topics lately. I’ve tried to fix this on my own but I’m not quite able to do what I want.

I want the post navigation to be like the following:

Previous Post: Next Post:
< Thumbnail image Thumbnail image >
Post title Post title

If possible, I’d like the arrow itself to be a button I could hover over and click, looking like the “back to top” button. The Previous Post/Next Post labels can be hyperlinks or not, I don’t really care.

I’ve followed the instructions in this post, and that works great, but I changed the code to make the post titles below the thumbnail images, but I’m having a problem with the arrows. For example, I modified the code thus:

previous_post_link( '<div class="nav-previous"><p class="prev-label">Previous Article:</p><span class="prev" title="' . __('Previous','generatepress') .  '">%link</span></div>', '<span class="prev-thumbnail">' . $prevThumbnail . '</span>' . '<p class="prev-title">' . '%title' . '</p>', $category_specific );
			next_post_link( '<div class="nav-next"><p class="next-label">Next Article:</p><span class="next" title="' . __('Next','generatepress') . '">%link</span></div>', '<span class="next-thumbnail">' .$nextThumbnail . '</span>' . '<p class="next-title">' . '%title' . '</p>', $category_specific );

And the result is this:

Previous Post: Next Post:
< Thumbnail image Thumbnail image
Post title Post title
>

No matter what CSS I try, the right arrow refuses to budge. Also, I’m nervous about messing with margins in CSS because it might make it look weird on mobile. Also, although this sort of accomplishes what I want, I can’t style the arrows or make them clickable.

What else can I try?

Thanks so much!
Have a great day!
Callista

GeneratePress 2.2.2

GP Premium 1.7.8

[Callista]

Oops, looks like I need to show an image. Here’s what it looks like. Note the hanging arrow on the right side.

http://www.callistarakhmatov.com/wp-content/uploads/2019-04-16.png

Thanks!

[Tom]

Hi there,

Looks like you’re close! Any chance you can send us login details so we can bypass the coming soon page?: https://generatepress.com/contact

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Callista]

Of course! Sending the info over now.

[Tom]

Give this CSS a try, and be sure to remove the two blocks of custom CSS I’ve adjusted:

.post-navigation .nav-next .next a:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
    font-size: 2em;
    color: #000;
    position: absolute;
    right: 0;
    top: calc(50% - 30px);
}

.post-navigation .nav-previous .prev a:before {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f104";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
    font-size: 2em;
    color: #000;
    position: absolute;
    left: 0;
    top: calc(50% - 30px);
}

.nav-next {
    position: relative;
    padding-right: 20px;
}

.nav-previous {
    position: relative;
    padding-left: 20px;
}

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Callista]

Hi Tom,
That’s perfect!! The only slight tweak I have is in the first 2 blocks, I removed “position:relative;” because later you have “position:absolute;” and I didn’t want them to conflict.
It’s exactly what I was looking for. Thank you sooooo much!!
Best,
Callista

[Tom]

Awesome! You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts