[Resolved] Inline Post Navigation with SVG Icon Type

Home Forums Support Inline Post Navigation with SVG Icon Type

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1233046
    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!

    #1233360
    Tom
    Lead Developer
    Lead Developer

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

    #1539660
    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

    #1539885
    David
    Staff
    Customer Support

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.