Home>Support>Change the size of the MastHead on Vantage

Change the size of the MastHead on Vantage

By JR R, 10 years ago. Last reply by Simo, 7 years ago.

Hi im using the Vantage theme and am NOT a premium user BUT would like to to resize the HEADER, or what VANTAGE theme refers to as the MASTHEAD. I want to reduce the height (remove some whitespace when showing the logo)

Is there a way to adjust the size if I am NOT a premium subscriber?

If so, please direct me the location of the file (im new to WP and a non web dev guy) and what needs to be adjusted if this is possivble, thank you!!

thanks for any assistance!!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi JR

    Install a custom css plugin like this one: https://wordpress.org/plugins/simple-custom-css/ or use the one in WordPress Jetpack.

    Insert the following:

    /* Header Padding */
    
    header#masthead .hgroup {
    padding-bottom: 45px !important;
    padding-top: 45px !important;
    }
    

    Adjust the padding as required.

    • 10 years, 22 days ago Jeff Campbell

      Andrew, I am having the same issue. I’ve used the Simple Custom CSS plugin and adjusted the pixels down to 10. When I save the css update, things look good when I am logged in to WordPress, but there are no evident changes when I log out and refresh my browser. Am I doing something incorrect?

      Website: http://www.grandkinstudios.com

       /* Header Padding */
      
      header#masthead .hgroup {
      padding-bottom: 10px !important;
      padding-top: 10px !important;
      } 
      • 10 years, 22 days ago Andrew Misplon
        Hi, I Work Here

        Hi Jeff

        Your CSS is looking good. If for example I change 10px so zero on your site I do see a change.

        Let me know how it’s going.

  2. 10 years, 1 month ago Anjani Kumari

    given tips not work

  3. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Please send me a link to your site with the Custom CSS in place. Thanks.

  4. 10 years, 5 days ago Tim Leu

    Greetings Andrew! First off, Awesome theme! Fell in love with it when I first looked it over. So much so, I purchased the premium version. Second, there a way to do this without downloading another plug-in, as the site already has 12-site specific plug-ins for the site to work properly. I uploaded an image that is 500 px by 140 px and it defaults to the Vantage size of 181 px by 41 px. Thanks ahead of time!

    • 10 years, 5 days ago Andrew Misplon
      Hi, I Work Here

      Hi Tim

      Thanks very much for your continued support and positive feedback, it’s most appreciated.

      Please could you open a new thread for me and include a link to your site if possible. I’ll jump in there ASAP.

      Thanks again.
      https://siteorigin.com/new-thread/

  5. 9 years, 11 months ago frank bezema

    Hi ANdrew I have the same problem as well. The header is way to big and it leaves a lot of white space. As I am new to wordpress and building a site I do not understand any of the CSS. The tip of Tim does not seem to work either. PLEASE HELP

    http://www.coninsu.com

    • 9 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Hi Frank

      For Vantage Free: insert the CSS I provided above in a plugin like Simple Custom CSS, and adjust the numbers to your requirements.

      For Vantage Premium: adjust header padding at Appearance > Customize > General: Header Padding.

      Please open a new support thread if you need further assistance: https://siteorigin.com/new-thread/. Unless you’re commenting to help out with a question we do ask that you please open a new thread.

      Thanks for your support.

  6. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Please note that from Vantage 2.2.3 hgroup was changed from a tag to a class so the CSS to do this with Vantage Free now looks as follows:

     /* Header Padding */
    
    header#masthead .hgroup {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    } 
    

    The change being I added a period in front of hgroup.

  7. 9 years, 9 months ago katie

    Solution to reducing header height, it worked for me. I have the free version and my masthead is set to “default masthead”. Been trying different things to decrease the height of that header and the only thing that has worked is changing the css in the vantage template style sheet..
    What I did:
    Appearance, editor, scroll down to “css.style” on the bottom right.
    Then scroll down a bit in the style sheet code to the masthead area (see below). It’s set to 45px so just change the 45px to 10px in both top and bottom padding and whamo, it works. I also changed the color of the header while I was in there too, just a style choice to lessen the white of the header.
    header#masthead .hgroup {
    zoom: 1;
    position: relative;
    padding-top: 45px;
    padding-bottom: 45px;
    }

  8. 9 years, 8 months ago smartisland

    I recently signed up for Vantage Premium. I am trying to change the header. But I do not see the “header padding at Appearance > Customize > General: Header Padding” option at all. Also, I would like to change the menu buttons (Home, About, etc). How can I do that please?.

    • 9 years, 8 months ago Andrew Misplon
      Hi, I Work Here

      Hi smartisland

      Thanks for reaching out.

      Please open a new thread and we’ll be with you ASAP:

      Page: New Thread

      Thanks

  9. 8 years, 11 months ago Suzy Kowalski

    Dear Andrew, impossible to change the header hight. I managed to change the font with CSS, but not the height. Way too much white space above and below logo.
    Can you help out here? .
    If I insert a less higher logo, it is crushed & deformed, that is not an option.
    Thx

  10. 8 years, 7 months ago Patrick Hart de Keating

    Hey,

    Working perfect for me, like Katie i went in Appearance, editor, scrolled down to “css.style” on the bottom right.
    The thing is that it changed now (Katie posted 1 year and 1 month ago) so in 2016 it’s :

    #masthead .hgroup {
    zoom: 1;
    position: relative;
    padding-top: 45px; (change it for whateverpx)
    padding-bottom: 45px; (change it for whateverpx)
    /*
    / === You can even add this comment to make sure you remember where you did the change ===
    */

    Thanks a lot !

  11. 8 years, 11 days ago Pankaj Kumar

    I wanted the same. It worked. Thank you Andrew..!

  12. 7 years, 10 months ago Simo

    Re Patrick Hart de Keating solution,

    I have the latest version and this has manage to shrink the size down for me.

    I thank Andrew as all his tips help but not this time :)

    Still learning I am…

    Simos

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More