This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Change the size of the MastHead on Vantage

Resolved 17 replies themetheme-vantage
JR R
11 years ago · Last reply by Simo 9 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.

Need fast email support? Get SiteOrigin Premium

Replies

17
  1. Andrew Misplon Staff 11 years, 9 months ago

    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.

    • Jeff Campbell 11 years, 5 months ago

      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;
}
      • Andrew Misplon Staff 11 years, 5 months ago

        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. Anjani Kumari 11 years, 6 months ago

    given tips not work

  3. Andrew Misplon Staff 11 years, 6 months ago

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

  4. Tim Leu 11 years, 5 months ago

    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!

    • Andrew Misplon Staff 11 years, 5 months ago

      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. frank bezema 11 years, 4 months ago

    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

    • Andrew Misplon Staff 11 years, 4 months ago

      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. Andrew Misplon Staff 11 years, 4 months ago

    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. katie 11 years, 3 months ago

    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. smartisland 11 years, 1 month ago

    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?.

    • Andrew Misplon Staff 11 years, 1 month ago

      Hi smartisland

      Thanks for reaching out.

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

      Page: New Thread

      Thanks

  9. Suzy Kowalski 10 years, 4 months ago

    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. Patrick Hart de Keating 10 years, 1 month ago

    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. Pankaj Kumar 9 years, 5 months ago

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

  12. Simo 9 years, 3 months ago

    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.

Have a different question or issue?

Start New Thread