[Resolved] Move post navigation

[recchia]

Hi,
I’m using gp with elementor.
I need to move the posts navigation from the bottom of the page, to the middle (exactly on top of the blu stripe “DETTAGLI”.
How can i do this for all posts?
Thanks!

[recchia]

Tried cutting this code from the “inspect” of chrome:

<nav id=”nav-below” class=”post-navigation”>
<span class=”screen-reader-text”>Navigazione articolo</span>

<span class=”prev” title=”Precedente”>Secchio</span>

<span class=”next” title=”Successivo”>Busta</span>

</nav>

And pasted where i want, but I’m not sure this is the right way to proceed. Also, i don’t know if works for all pages or not…

[Tom]

Hi there,

Sorry we didn’t get back to you sooner! Not sure how this slipped through.

Something like this would be pretty difficult unfortunately. You could try adding the post navigation in a shortcode:

add_shortcode( 'post_navigation', 'tu_post_navigation_shortcode' );
function tu_post_navigation_shortcode() {
    ob_start();
    if ( function_exists( 'generate_content_nav' ) ) {
        generate_content_nav( 'nav-below' );
    }
    return ob_get_clean();
}

Then use [post_navigation] where you want it to show up.

Totally untested, but should work in theory 🙂

[recchia]

Thank you so much Tom!
This code works without problems but now i have 2 navigation posts. One is generated by your shortcode and the second one is the original located under the footer.
If i try to hide the one under the footer with this code:

.post-navigation {
display: none;
}

both navigation posts disappers.
I think this happen due to the same name (.post-navigation)
There is a way to hide the whole white bar under the footer without refer to “.post-navigation”?

Once again, thaks

[Leo]

Try this:

footer.entry-meta {
    display: none;
}

[recchia]

Hi Leo,
Problem solved, thank you!
Great support as ever.
Regards

[Leo]

Glad we could help!

[recchia]

Oh sorry,
but I forgot to tell you that under 1069px of width the “.post-navigation” bar wraps.
How can I let both buttons on the same line?
Thanks

[Leo]

Not sure what you mean? I don’t see the post navigation anymore?

[recchia]

At the moment, posts navigation is not jet on all pages.
On this page (http://80.88.87.158/plesk-site-preview/cilentospa.it/80.88.87.158/vasca/) the shortcode is active, so u can see that in mobile version, the right button goes under the left one.

Screenshot 1: https://i.imgur.com/0QCQ5xV.png
Screenshot 2: https://i.imgur.com/qt9wpsH.png
Screenshot 3 (smartphone): https://i.imgur.com/qa2lJd2.jpg

Seeing “screenshot 3” i think the problem is due to the long name of buttons, but in the first screenshot there is still room between buttons. I don’t think is fault of long name buttons.
What should I do?
How can I change the name of buttons? maybe with “next” and “previous” ?

Thank you for the patience

[Leo]

I’m not seeing the post navigation as you are showing in the screenshots?

Did you remove them?

[Tom]

Give this CSS a try:

.post-navigation .nav-previous {
    float: left;
}

.post-navigation .nav-next {
    float: right;
}

[recchia]

No… now is on all pages…
This are some pages, are you seeing it correctly?
http://80.88.87.158/plesk-site-preview/cilentospa.it/80.88.87.158/vasca/
http://80.88.87.158/plesk-site-preview/cilentospa.it/80.88.87.158/secchiello-mozzarella/
http://80.88.87.158/plesk-site-preview/cilentospa.it/80.88.87.158/bicchiere-burrata/
http://80.88.87.158/plesk-site-preview/cilentospa.it/80.88.87.158/busta-microonde/

I really don’t know what’s happening…

[Tom]

Maybe I don’t understand – what’s the issue exactly? Now the link are on the left and right side of the page. Are they displaying on pages they shouldn’t be or something?

[recchia]

Thanks! That code works.
Regards

[Author]

Posts