How to relocate Page Titles below Header in Digital Pro

Posted on Leave a comment
5/5 - (162 votes)

Looking to move titles from their usual position (inside .entry-header in content) to below the site header in their own div on static Pages in Digital Pro?

We shall remove entry header (having the entry title) and add entry title wrapped inside a custom .page-title div below the header.

Step 1

Add the following in functions.php:

// Reposition Page Title
add_action( 'genesis_header', 'custom_page_title' );
function custom_page_title() {

	if ( is_page() and !is_front_page() ) {
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
			remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

		add_action( 'genesis_after_header', function () {
			echo '<div class="page-title"><div class="wrap">';
		} );
			add_action( 'genesis_after_header', 'genesis_do_post_title' );
		add_action( 'genesis_after_header', function () {
			echo '</div></div>';
		} );
	}

}

Step 2

Add the following in style.css:

.page .site-inner {
	margin-top: 0;
}

.page-title {
	margin-top: 91px;
	padding: 60px 0;
	background-color: #f7f7f7;
	text-align: center;
}

.page-title .wrap {
	max-width: 1280px;
	margin: 0 auto;
}

.page .entry-title {
	margin-bottom: 0;
}

@media only screen and (max-width: 800px) {

	.page-title {
		margin-top: 0;
	}

}
Leave a Reply

Your email address will not be published. Required fields are marked *