Floating Previous + Next Nav Links

A cool way to encourage readers to click through to more content is to use a floating post nav; a subtle yet persistent way of linking to your next and previous posts.

(scroll down for preview + 2 step install guide)

This code snippet adds a floating post nav on your single blog posts that automatically pulls the previous and next post (if there are any) to show with a neat toggle effect in the gutters of your page.

The floating nav hides on mobile, and disappears behind the footer once you scroll to the bottom of the page (MD4.5.4+ only).

Step 1: Paste the Template Function into your functions.php file:

function md_floating_post_nav() {
	$previous = get_previous_post();
	$next     = get_next_post();
?>

	<?php if ( is_single() && ( $previous || $next ) ) : ?>

		<div class="floating-nav">

			<?php if ( $previous ) : ?>
				<a href="<?php echo esc_url( site_url( $previous->post_name ) ); ?>" class="floating-nav-prev">
					<span class="floating-nav-icon md-icon-angle-left"></span>  
					<span class="floating-nav-label"><?php _e( 'Previous', 'md' ); ?></span>
					<span class="floating-nav-title"><?php echo esc_html( $previous->post_title ); ?></span>
				</a>
			<?php endif; ?>

			<?php if ( $next ) : ?>
				<a href="<?php echo esc_url( site_url( $next->post_name ) ); ?>" class="floating-nav-next">
					<span class="floating-nav-label"><?php _e( 'Next', 'md' ); ?></span>
					<span class="floating-nav-icon md-icon-angle-right"></span>  
					<span class="floating-nav-title"><?php echo esc_html( $next->post_title ); ?></span>
				</a>
			<?php endif; ?>

		</div>

	<?php endif; ?>

<?php }

add_action( 'md_hook_content', 'md_floating_post_nav', 90 );

Step 2: Add the Floating Nav Styles to your style.css file:

/* FLOATING NAV */

.floating-nav {
	color: #1e1e1e;
	cursor: pointer;
	font-size: 14px;
	line-height: 19px;
	position: relative;
	z-index: 20;
}

.floating-nav a {
	color: #1e1e1e;
}

.floating-nav-prev,
.floating-nav-next {
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 0;
	padding: 16px 13px;
	position: fixed;
		top: 40%;
	width: 110px;
}

.floating-nav-prev {
	left: 0;
}

.floating-nav-next {
	right: 0;
	text-align: right;
}

.floating-nav-label {
	border-bottom: 2px solid #ddd;
	color: #ae2525;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
}

.floating-nav-title {
	display: none;
}

.floating-nav-prev:hover .floating-nav-title,
.floating-nav-next:hover .floating-nav-title {
	display: block;
	padding-top: 13px;
}


@media all and (max-width: 1118px) {

	.floating-nav {
		display: none;
	}

}

Step 3 (optional): Remove the Default MD Post Nav

By default, Marketers Delight adds a post nav to the very bottom of the content box on single blog posts. If you only want to show the floating post nav, you can remove the default post nav by manipulating the page template and unhooking it:

function md_child_theme_template_redirect() {
	remove_action( 'md_hook_content', 'md_post_nav', 90 );
}

add_action( 'template_redirect', 'md_child_theme_template_redirect' );

Note, if you already have an existing function that hooks to template_redirect, you can simply copy and paste the remove_action hook into it for organizational purposes.

Leave a Comment