Archived topic
Minor tweak needed for Inline Post Navigation with SVG Icon Type
3 replies · Started by Luis on November 21, 2020
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!