Remove After Header Background Image Gap In Beautiful Pro Theme

Jan 4, 2014

—

The beautiful Pro theme by StudioPress includes a very unique after header background image.

If you prefer not to display an image in this position, you will need to modify the code otherwise you will be left with a 200px height white space after your header.

There are other options which you might want to check out first which i have linked to at the end of this post.

The reason for that is the PHP generates the class site-header-banner regardless of whether the image is removed or not so you need to remove this code from your child themes functions file.

//* Hook site header banner after header
add_action( 'genesis_after_header', 'beautiful_site_header_banner' );
function beautiful_site_header_banner() {

  echo '<div class="site-header-banner"></div>';

}

This is the CSS on line 913 of your child themes style.css file which adds the 200px of white space after the header:

.beautiful .site-header-banner {
height: 200px;
}

Other Options

Comments

4 responses to “Remove After Header Background Image Gap In Beautiful Pro Theme”

Matt

August 23, 2014

Do we also remove this code?
[code]
.beautiful .site-header-banner {
height: 200px;
}
[/code]

Log in to Reply
Cecilie

June 7, 2014

Hi Brad!

Thank you so much for this website. I am a newbie and usually when someone mentions the word coding I already seem to panic, but from reading some of your tutorials, you make it seem so simple!
I have the beautiful pro theme and there is a change to the design I would like to make. Instead of the site title and header image design it has, I would like to make it somewhat like on this website which has a background instead of site title and a text logo instead of header. Do you have a tutorial for that?

Thank you so much for your help 🙂

Cecilie

Log in to Reply
1. Brad Dalton
  
  June 7, 2014
  
  Hi Cecilie
  
  Don’t have anything that specifically does what you want on your theme but i did send you an email.
  
  Log in to Reply
David Abramson

May 20, 2014

Worked like a charm! Thanks as always for your Genesis tutorials 🙂

Log in to Reply