Moving the post navigation above the entry header

Hi there,

Sorry I'm not quite getting this. So currently you have the navigation set at one location but you would like it to be a different location for single post only?

Let me know.

Exactly, for a single post I want to move the the navigation above the header. Precisely, to move <nav role="navigation" id="nav-below" class="post-navigation"> above <header class="entry-header">. Here is my code structure:

<div id="page" class="hfeed site grid-container container grid-parent">
  <div id="content" class="site-content">
    <div id="primary" class="content-area grid-parent mobile-grid-100 push-25 grid-75 tablet-push-25 tablet-grid-75">
      <main id="main" class="site-main">
        <article id="post-103" class="post-103 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized" itemtype="http://schema.org/CreativeWork" itemscope="itemscope">
          <div class="inside-article">
            <header class="entry-header">
              <h1 class="entry-title" itemprop="headline">Une autre petite image</h1>
              <div class="entry-meta"> </div>
              <!-- .entry-meta --> 
            </header>
            <!-- .entry-header -->
            <div class="page-header-image-single page-header-below-title grid-container grid-parent generate-page-header"> <img width="1200" height="800" src="http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022.jpg" class="attachment-full size-full" alt="" itemprop="image" srcset="http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022.jpg 1200w, http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022-300x200.jpg 300w, http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022-768x512.jpg 768w, http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022-1024x683.jpg 1024w, http://sylvainvachon.com/wp-content/uploads/sites/3/2017/07/0022-350x233.jpg 350w" sizes="(max-width: 1200px) 100vw, 1200px"> </div>
            <div class="entry-content" itemprop="text"> </div>
            <!-- .entry-content -->
            <footer class="entry-meta">
              <nav role="navigation" id="nav-below" class="post-navigation">
                <h6 class="screen-reader-text">Post navigation</h6>
                <div class="nav-previous"><span class="prev" title="Previous">Previous <a href="http://sylvainvachon.com/2017/07/15/cest-le-debut-de-mon-blog-dillustration/" rel="prev">C'est le début de mon blog d'illustration</a></span></div>
                <div class="nav-next"><span class="next" title="Next">Next <a href="http://sylvainvachon.com/2017/07/15/que-va-ton-devenir/" rel="next">Que va ton devenir?</a></span></div>
              </nav>
              <!-- #nav-below --> 
            </footer>
            <!-- .entry-meta --> 
          </div>
          <!-- .inside-article --> 
        </article>
        <!-- #post-## -->
        <div class="comments-area">
          <div id="comments">
            <div id="respond" class="comment-respond">
              <h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/07/15/une-autre-petite-image/#respond" style="display:none;">Cancel reply</a></small></h3>
            </div>
            <!-- #respond --> 
          </div>
          <!-- #comments --> 
        </div>
      </main>
      <!-- #main --> 
    </div>
    <!-- #primary --> 
    <!-- #secondary --> 
  </div>
  <!-- #content --> 
</div>

Thanks!

This filter should help: https://docs.generatepress.com/article/navigation-location/#generate_navigation_location

The conditional tag you need is is_single()

Let me know.

This filter doesn't help because it moves the primary navigation and in my case I want to move the previous and next post navigation.

Do you have any clues?

Thanks!

Hmm, you could try this.

1. Hide it with CSS:

footer.entry-meta .post-navigation {
    display: none;
}

2. Add your own:

add_action( 'generate_before_content', 'tu_move_post_navigation' );
function tu_move_post_navigation() {
    if ( function_exists( 'generate_content_nav' ) && is_single() ) {
        generate_content_nav( 'nav-below' );
    }
}

Let me know if this helps or not :)

This is working perfectly.

Thanks alot for the highly customizable theme!

Thanks for using it! :)