Site logo

Archived topic

Minor tweak needed for Inline Post Navigation with SVG Icon Type

3 replies · Started by Luis on November 21, 2020

Viewing posts 1–4 of 4

Hi guys,

When using the official code, posted here > https://generatepress.com/forums/topic/inline-post-navigation-with-svg-icon-type/

I noticed a slight visual difference as the screen shrinks to mobile view.

I like how the ‘Previous’ looks in mobile view and was wondering what CSS changes are needed to make ‘Next’ look like a mirror version?

(If that’s too involved, I would be okay with ‘Previous’ being a mirror version of ‘Next’ and the icons sitting at the top).

I had a decent go at this but my CSS isn't that great.

Thanks a bunch. =)

Hi there,

try adding this CSS:

.post-navigation .nav-previous {
    display: flex;
}

.nav-next .gp-icon,
.nav-previous .gp-icon {
    align-self: flex-start;
    margin-top: 2px;
}

It will align the two next/previous icons to the top of the element.

Thanks, that's perfect!

Glad to hear that!

This archived topic is closed to new replies.