Archived topic
Separate Header Width from Container Width
4 replies · Started by Anonymous on October 10, 2014
Hello,
I'm currently attempting to develop a child theme from GeneratePress. I want to have the header width expand to cover the width of the browser's viewport (up to a certain limit), but without changing the width of the rest of the document's body.
I attempted to do this by duplicating the following function in the child functions.php file:
Before
if ( ! function_exists( 'generate_featured_page_header_area' ) ) {
function generate_featured_page_header_area($class)
{
global $post;
$page_header_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$page_header_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );
$page_header_image_width = $page_header_image_info[1];
$page_header_image_height = $page_header_image_info[2];
if ( !empty($page_header_image) ) :
<strong>echo '<div class="' . $class . ' grid-container grid-parent">';</strong>
echo '<img src="' . $page_header_image . '" width="' . $page_header_image_width . '" height="' . $page_header_image_height . '" alt="" />';
echo '</div>';
endif;
}
}
After
<?php
/**
* Build the page header
* Edited 10/10/2014
*/
function generate_featured_page_header_area($class)
{
global $post;
$page_header_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$page_header_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );
$page_header_image_width = $page_header_image_info[1];
$page_header_image_height = $page_header_image_info[2];
if ( !empty($page_header_image) ) :
<strong>echo '<div class="' . $class . 'grid-parent">';</strong>
echo '<img src="' . $page_header_image . '" width="' . $page_header_image_width . '" height="' . $page_header_image_height . '" alt="" />';
echo '</div>';
endif;
}
?>
When I observed the code of the new page, the <div> just inside the header still had the class .grid-container, which employed the auto-margins I'm trying to remove from the header, but not the rest of the body. So far I'm at a loss for how to do this.
Please excuse the tags inside the code. I was attempting to highlight where I made the change.
Maybe try this CSS:
.site-header .grid-container {
max-width: 100%;
}
If you're talking about the Page Header (Featured Image/Page Header addon):
.generate-page-header .grid-container {
max-width: 100%;
}
Should achieve what you're trying to do, with much less code :)
Yup, the first CSS did it. Thanks Tom!
You're welcome! :)