Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 13, 2018 at 8:57 pm #985325
    gavdonald

    Hi, my client would like to have navigation arrows on the portfolio items pages so users can navigate between pages easier. I have unchecked the Disable the post navigation, under Single Post options but when I view the website on mobile devices the arrows to not appear. They appear on desktop browsers though. Can you help with this? Also on the desktop view the arrows are placed at the extremeties of the browser window – is there anything that can be done to pull them in a bit closer to make them more obvious?

    July 14, 2018 at 9:03 am #985441
    Rikard

    Hey gavdonald,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav {
    display: block !important;
}
}

    Best regards,
    Rikard

    July 15, 2018 at 7:54 pm #985726
    gavdonald

    Thanks that made the arrows appear on the mobile device.
    Is there anything we can do to perhaps bring the arrows in towards the content instead of having them on the far right and left of the browser? Also the arrows seem to be the wrong way around? I would expect the arrow on the left to go forwards through the portfolio items and the right one to go backwards?

    July 17, 2018 at 6:14 pm #986537
    Dude

    Hi,

    1) You can change the order of the arrows by adding this code to your child theme functions.php file:

    
add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); 
function enfold_customization_postnav($entries, $settings)
{
	$entries['prev'] = get_next_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
	$entries['next'] = get_previous_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);

    return $entries;
}

    2) To be honest this is not easily possible because the styling of the arrows is optimized for the far left/right of the browser. If you really want to change the position you can use this code (add it to the quick css field):

    
#top #wrap_all .avia-post-prev {
    left: 100px;
}

#top #wrap_all .avia-post-next {
    right: 100px;
}

    You can replace 100 with a lower or higher value to change the position (higher values shift the arrows towards the center).

    Best regards,
    Dude

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.