[Resolved] Inline Post Navigation with SVG Icon Type

[Randy]

Hey guys!

This isn’t a support request. Just a quick heads up on the Inline Post Navigation documentation page.

If you’re using the SVG icon type, the provided CSS doesn’t work so great.

For what it’s worth, here was my solution.

.post-navigation {
	display: flex;
}

.post-navigation .nav-next {
	width: 50%;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
}

.post-navigation .nav-previous {
	width: 50%;
}

.nav-next .gp-icon {
	margin-left: .6em;
	margin-right: 0;
}

I’d assume there’s probably some other instances where the documentation CSS might not work as expected if you’re using the new SVG icon type in the customizer. Just thought I’d let you guys know.

GP is the best and your support is always top notch! Thank you!

[Tom]

Thank you for sharing it! Will get the CSS updated ASAP 🙂

[Luis]

Hi, thought I should add this question here first for others to find…

When using the above code in mobile view, the padding on the ‘Next’ applies to all the text, while the padding on ‘Previous’ doesn’t.

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)

Picture here >

https://ibb.co/pxmgkFM

[David]

Hi there,

can you raise a new topic where you can share a link to your site so we can take a look at that

[Author]

Posts