Vantage Theme from Site Origin – Header Spacing CSS

Summary

The Vantage Theme from Site Origin offers a clean and simple layout with responsive design. Depending on your preference, you may wish to have less unused and empty space at the top of the page. The instructions here describe how you can adjust the spacing at the top of the page in the header area above and below the logo.

Instructions

  1. In your WordPress Dashboard navigate to Appearance > Theme Settings > Logo.
  2. There’s an option to have Header Text, which will appear as a small font in the header to the right of your logo, but this text looks a bit out of place. So, it’s best to leave that blank.
  3. You can upload a logo image of just about any size, although a rectangular shape may be best for visibility. The header can be the width of the page if you like.
  4. Using a clean large font it’s possible to type out your site name in your graphic design program. An image of 985 x 85 is a good pixel dimension because the site name will be readable at multiple sizes.
  5. In the Vantage stylesheet,  you’ll find the following code. However, there’s no need to go search for it. The code is provided here for illustration purposes:

    header#masthead .hgroup {
    zoom: 1;
    position: relative;
    padding-top: 45px;
    padding-bottom: 45px;
    }

  6. The 45 pixel top and bottom padding is the problem. It makes a huge amount of unnecessary white space above and below your logo.
  7. To correct this problem, install the JetPack plugin suite from WordPress if you’ve not done so already. This is most easily done by going to Dashboard > Plugins > Add New > then search for JetPack. Make sure the Author name is Automattic. Install JetPack. Then connect it to your WordPress.com account (if you don’t have one, create one for free).
  8. Go to Dashboard > Appearance > Edit CSS and add the following code below the Welcome to Custom CSS message:

    header#masthead .hgroup {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

    .main-navigation {
    margin-top: 0 !important;
    }

  9. This code also adjusts the top margin for the main navigation.

For previous versions of the Vantage Theme, the code may need to be slightly different. Above where you see .hgroup, you may need to remove the period before hgroup to make this work.

Leave a Reply