Ethos previous and next buttons on mobile

Support
#1

Hi

I’m looking to get the ‘previous’ and ‘next’ post buttons to appear on mobile. I found and older post that showed how to do it by adding the following code to child themes functions.php

But it didn’t quite work… they did show up on mobile but now on both mobile and desktop only one or the other (next or previous showed up)

Could you give me a updated version of this code that works?

function x_entry_navigation() {

$stack = x_get_stack();

if ( $stack == ‘ethos’ ) {
$left_icon = ‘’;
$right_icon = ‘’;
} else {
$left_icon = ‘’;
$right_icon = ‘’;
}

$is_ltr = ! is_rtl();
$prev_post = get_adjacent_post( true, ‘’, false );
$next_post = get_adjacent_post( true, ‘’, true );
$prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
$next_icon = ( $is_ltr ) ? $right_icon : $left_icon;

?>

<?php if ( $prev_post ) : ?>
  <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
    <?php echo $prev_icon; ?>
  </a>
<?php endif; ?>

<?php if ( $next_post ) : ?>
  <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
    <?php echo $next_icon; ?>
  </a>
<?php endif; ?>
<?php }
#2

Hi @BASK,

Thanks for writing in.

You can add class to the buttons so that you can adjust where you want to show it.

For example, if you want to hide it mobile,

<?php if ( $prev_post ) : ?>
  <a class="nextprevbutton" href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
    <?php echo $prev_icon; ?>
  </a>
<?php endif; ?>

<?php if ( $next_post ) : ?>
  <a class="nextprevbutton"  href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
    <?php echo $next_icon; ?>
  </a>
<?php endif; ?>

Then add this in your custom CSS:

@media (max-width:  767px) {
.nextprevbutton{
    dislay:none;
}
}

Hope it helps.

Thanks.

#3

I want to show it on mobile so would I just change the css to:

display:block;

or do I need to adjust the php aswell?

#4

Hello @BASK,

There is no need to change any thing in Php.

Thanks.

#5

I tried adding the code that you gave me to functions.php but it broke my site.

Just started returning a Parse error: syntax error

any advise?

#6

Hello There,

Thanks for updating in! You are not suppose to insert a css code in your child theme’s functions.php file. Please remove it to resolve the error.

To display the next and previous buttons in smaller screens, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS or in your child theme’s style.css

@media (max-width: 767px){
  body.single-post .x-nav-articles {
    display: block;
    float: none;
    width: 100%;
    margin: 0 auto 30px;
  }    
}

When properly place, you will have something like this:

Please let us know how it goes.