Change position of post-nav buttons below post

Hi Victoria,

we are urgently asked to solve this issue – can you help, please?

Kind regards
Tobi

Hi,
thanks for your thoughts which i share, but what counts is what our customer wants. So we just look for a solution to move those buttons.
I can‘t share the project with a public link for contractors reasons. Regards!

Thanks a lot Ismael,

i just added your code except removing the default nav in the footer because until now the new nav doesn’t work. Just nothing seems to change. We saved the changes, deactivated the cache. Is there another file i would have to edit? We are using a child theme, can this be a problem?

best regards
Tobi

Select to disable or enable the post navigation that links to the next/previous post on single entries. Setting is also used for portfolio. Use filter avf_post_nav_settings to customize.

No, we really don’t just want to remove it. Setting this would disable the Nav globally. We just want to move that navigation below the posts.

• This reply was modified 5 years, 6 months ago by check-t.

Allright,

i sorted it out and it seems to work. Problem was, that a custom Post-template was used by a colleague with no documentation. Thats why all changes didn’t showed up. Big Sorry!!

Just two more CSS things

– The two Buttons for prev and next post are positioned below each other under the post, relative to the post-content. i would like to show them beside of each other at this position with 50% / 50% width – how can i do this?
– only on a display with of below 768px i have the buttons below the post, as the customer wishes – on wider screens the buttons are still floating ta the edge of the screen. How can we manage to have it always below the post?

The actual CSS for Styling is this:

#top .custom-post-nav {
    clear: both;
}

#top .avia-post-nav {
    position: relative;
    height: 110px;
margin: 10px 50px 10px 50px;
background-color:rgba(0, 0, 0, 0.5);
}

#top .avia-post-nav .entry-info-wrap {
    width: auto;
}

Thanks again!

• This reply was modified 5 years, 6 months ago by check-t.

Yes, of course i tested your CSS but the customer REALLY wants the buttons below the text, positioned RELATIVE to it. Unfortunately my or your taste in Layout and Design doesn’t count here. Sorry for my misunderstand-able writing.

Regards
Tobi

• This reply was modified 5 years, 6 months ago by check-t.

Hi,

i would love to give you access, unfortunately i cannot because of company restrictions.

This is our single.php based on your post:

<?php
	if ( !defined('ABSPATH') ){ die(); }
	
	global $avia_config;

	/*
	 * get_header is a basic wordpress function, used to retrieve the header.php file in your theme directory.
	 */
	 get_header();

	$title  = __('Blog - Latest News', 'avia_framework'); //default blog title
	$t_link = home_url('/');
	$t_sub = "";

	if(avia_get_option('frontpage') && $new = avia_get_option('blogpage'))
	{
		$title 	= get_the_title($new); //if the blog is attached to a page use this title
		$t_link = get_permalink($new);
		$t_sub =  avia_post_meta($new, 'subtitle');
	}

	if( get_post_meta(get_the_ID(), 'header', true) != 'no') echo avia_title(array('heading'=>'strong', 'title' => $title, 'link' => $t_link, 'subtitle' => $t_sub));
	
	do_action( 'ava_after_main_title' );

?>

		<div class='container_wrap container_wrap_first main_color <?php avia_layout_class( 'main' ); ?>'>

			<div class='container template-blog template-single-blog '>

				<main class='content units <?php avia_layout_class( 'content' ); ?> <?php echo avia_blog_class_string(); ?>' <?php avia_markup_helper(array('context' => 'content','post_type'=>'post'));?>>

                    <?php
                    /* Run the loop to output the posts.
                    * If you want to overload this in a child theme then include a file
                    * called loop-index.php and that will be used instead.
                    *
                    */
                        get_template_part( 'includes/loop', 'index' );
						
						$blog_disabled = ( avia_get_option('disable_blog') == 'disable_blog' ) ? true : false;
						echo "<div class='custom-post-nav'>";
echo avia_post_nav();
echo "</div>";
						if(!$blog_disabled)
						{
	                        //show related posts based on tags if there are any
	                        get_template_part( 'includes/related-posts');
	
	                        //wordpress function that loads the comments template "comments.php"
	                        comments_template();
						}
                    ?>

				<!--end content-->

				</main>

						
				<?php
				$avia_config['currently_viewing'] = "blog";
				//get the sidebar
				get_sidebar();

				?>

			</div><!--end container-->

		</div><!-- close default .container_wrap element -->

<?php 
		get_footer();

This still leads to the problems i described in my former post. We need a css just like in the mockup in the private content:

– The two Buttons for prev and next post are positioned below each other directly under the post, relative to the post-content. i would like to show the buttons them beside of each other at this position with 50% / 50% width

– in the current state only on a display with of below 768px i have the buttons below the post, as the customer wishes – on wider screens the buttons are still floating ta the edge of the screen. How can we manage to have it always below the post?

Kind regards!

Hi Ismael,

sorry for my late response, was travelling. Yes, of course i add your CSS, but no success. I created a copy of the project where I’m able to provide admin login credentials for you. I hope this helps to solve the problem easier.

Kind regards, thanks again
Tobi

• This reply was modified 5 years, 6 months ago by check-t.

You are the greatest- :) Even if i can’t believe a my editior didn’t see that. Thanks!!