[Resolved] Moving the post navigation above the entry header

[Sylvain]

Hi,

I would like to know how to edit the post navigation in order to move it above the entry header.

Thanks for the great theme and the support!

Sylvain

[Leo]

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.

[Sylvain]

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!

[Leo]

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.

[Sylvain]

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!

[Tom]

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 🙂

[Sylvain]

This is working perfectly.

Thanks alot for the highly customizable theme!

[Tom]

Thanks for using it! 🙂

[Author]

Posts