• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Remove After Header Background Image Gap In Beautiful Pro Theme

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

Beautiful Pro Theme by StudioPress

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

  • Display Different After Header Images In Beautiful Pro Theme
  • Add 3 Widgets After The Beautiful Pro Themes Header
  • Add Beautiful Pro Themes After Header Banner Image To Genesis Sample Theme

Reader Interactions

Comments

  1. Matt says

    August 23, 2014 at 7:53 am

    Do we also remove this code?

    .beautiful .site-header-banner {
    height: 200px;
    }
    Log in to Reply
  2. Cecilie says

    June 7, 2014 at 6:28 pm

    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
    • Brad Dalton says

      June 7, 2014 at 6:54 pm

      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
  3. David Abramson says

    May 20, 2014 at 7:35 pm

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

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.