Make blog header span full width

Hey navindesigns,
Thank you for the link to your site and your example, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_single_post_banner() { ?>
  <script>
(function($) {
  $(function() {
  	var postTitle = $('.single-post h1.post-title').detach().text();
  	var postBanner = $('<div class="banner"><h1>'+ postTitle +'</h1></div>');
     $('.single-post .big-preview.single-big').detach().insertBefore('.container_wrap_first');
     $(postBanner).insertAfter('.single-post .big-preview.single-big img');
  });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_single_post_banner', 99);

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top.single-post #wrap_all .all_colors .big-preview.single-big .banner h1 {
	font-size: 18px;
}
.single-post .big-preview.single-big .banner {
	top:18%;
	padding:0 5%;
}
}

.single-post .big-preview.single-big {
    padding: 0;
	pointer-events:none;
}
.single-post .big-preview.single-big .banner {
	top:30%;
	position:absolute;
	z-index:4;
	padding:0 10%;
	color:#000;
}
.single-post .banner h1 {
	background-color: rgba(255,255,255,71%);
}

@media only screen and (min-width: 1440px) { 
.single-post .big-preview.single-big {
	max-height: 450px;
}
.single-post .big-preview.single-big a img {
	transform: translateY(-20%);
}
.single-post .big-preview.single-big a {
	max-height: 450px;
}
.single-post .big-preview.single-big .banner {
	top:36%;
	padding:0 15%;
}
}

it will take the single post feature image and title from the default layout like this:

and create a full width banner with the title in it like this:

On mobile it should look like this:

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Glad that this helped, the image may look pixelated because it is a featured image thumbnail (825px x 425px) shown at full screen, I didn’t notice it much on my screen, but if you have a larger screen you might notice it more.
When I check the title is centered on the screen, but if you mean center align the text try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.single-post .big-preview.single-big .banner {
    text-align: center;
}

You can remove the image overlay in the Enfold Theme Options ▸ Advanced Styling ▸ Linked Image Overlay option:

Best regards,
Mike

Hi,
I see that the original featured image image is smaller than the full screen width, so first you will need to make this as large as your screen width.
Then install the Simple Image Sizes plugin and adjust image size for entry_with_sidebar size and the featured size and turn off cropping
and then use the Regenerate Thumbnails plugin to reset the thumbnail sizes, typically this plugin works better that the other plugin for regenerating thumbnails.
If you have trouble try uploading a new image that is fullwidth with a different file name to ensure the new image size is working correctly.

Best regards,
Mike