I'm currently working on completing a theme and I've hit a roadblock. I am trying to add header support, but it's causing issues with my layout. Everything was running smoothly until I inserted this line of code:
<img src="<?php header_image(); ?>" />
As a result, my header now looks like this:
<hgroup class="blog-header">
<img src="<?php header_image(); ?>" alt="" />
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php the_breadcrumb(); ?>
</hgroup>
The issue is that everything looks fine without a header image, but once one is added, the styling for the site description gets messed up - shifting a few pixels from its original position. The title and description are supposed to be inline with each other, and I'm unsure how to rectify this problem without compromising the design.
Below are the styles I have defined for these elements:
.site-title {
font-family: 'Bree Serif', Georgia, serif;
font-weight: 700;
font-style: uppercase;
font-size: 30px;
color: #fff;
margin: 0 0 0 90px;
padding: 60px 25px 60px 0;
float: left;
}
.site-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #c9c9c9;
padding: 68px 25px 60px 0;
}