WordPress.org

Ready to get started?Download WordPress

Forums

Vantage
[resolved] [closed] Spacing on Header and Footer (17 posts)

  1. jfeng22
    Member
    Posted 11 months ago #

    Here's my website: websterlightgrant.com

    I'm having trouble getting rid of the white space above my header and the white space below the MetaSlider.

    I've been editing the spacing and padding however Everytime I update the edit the change doesn't apply.

    Could use some guidance, thank you!!

    -Jeff

  2. be.creative
    Member
    Posted 11 months ago #

    Jeff-

    are you using firebug?

  3. nam
    Member
    Posted 11 months ago #

    Hi Jeff,

    for header, find to this line and delete the line padding, just delete the line padding

    header#masthead { padding: 25px 35px; }

    for Meta slider, do the same, just delete the line padding

    #main { padding: 35px; }

    Good luck!

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    @namle - please do not advise people to modify theme files - those changes will be lost when the theme is updated. Changes should be made using a Child Theme or custom CSS.

  5. nam
    Member
    Posted 11 months ago #

    @Wpyogi - thank you so much for you advice. I'm sorry for my knowledge

  6. custom34
    Member
    Posted 10 months ago #

    A similar question... how would you remove the padding that seems to be automatically added to the custom logo?

    I just inserted a logo which I trimmed (no padding) and I would like to control the top & bottom padding. http://friedmanpictures.com

    Thanks,
    Tommy

  7. brshcollective
    Member
    Posted 10 months ago #

    I want to know the same thing Tommy, have found other posts about heading spacing and padding etc but none relating specifically how to do this in Vantage Theme. I hope someone out there has an answer.

    Thanks

    Saul

  8. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    That's a margin set here - try adding this to a custom CSS option or plugin:

    header#masthead hgroup {
        margin: 0;
    }

    Do NOT modify theme files directly or your changes will be lost when the theme is updated.

  9. brshcollective
    Member
    Posted 10 months ago #

    Thanks for your help, unfortunately this didn't seem to make any difference.

    here's the site http://brshcollective.com/ you can see the white all around the logo image in the header.

  10. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    I don't see that CSS code on your site - where did you add it?

  11. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    You may also want to add:

    header#masthead {
        padding: 0;
    }
  12. custom34
    Member
    Posted 10 months ago #

    header#masthead hgroup {
    margin: 0;
    }

    Worked halfway when I put it into the custom CSS plug-in called "My Custom CSS". Now the logo is aligned with the first menu button below it, with no padding on bottom. Looks like there is still padding on top.

    adding

    header#masthead {
    padding: 0;
    }

    Removes all 4 margins from logo, but also removes padding underneath the menu buttons. Changing the value of padding to the second code from zero to any number does the same thing, which makes an effect like the code was never there.

    I will leave my site with both codes on so you can see the final effect. Would be nice to be able to add /some/ padding -- http://friedmanpictures.com

  13. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Okay, try changing this one to:

    header#masthead {
        padding: 10px 0 20px 0;
    }

    You can adjust those if you prefer.

  14. brshcollective
    Member
    Posted 10 months ago #

    Hey guys thanks for your help. Really useful. It's a shame that the menu is also effected in the header masthead, else this would be the perfect solution. Is there a way to request /suggest this for a future update?

    Thanks

  15. Greg Priday
    Member
    Theme Author

    Posted 10 months ago #

    I updated the code for the header slightly in version 1.1. The main aim was to make it easier to make it easier to change the spacing.

    You can change the header spacing using the following custom CSS.

    header#masthead hgroup {
      padding-top: 30px;
      padding-bottom: 30px;
    }

    Obviously you can set the padding to what ever you want. Version 1.1 should be available as an auto update but you can do a manual update too if you'd like. Just download the latest version from SiteOrigin.

    http://siteorigin.com/theme/vantage/
    http://siteorigin.com/basics/updating-theme-from-zip/

  16. custom34
    Member
    Posted 10 months ago #

    Hi Greg,

    Thanks for making a nice theme. I'm looking forward to customizing until the point it's perfect, then purchasing the full version.

    However, your solution does not work for me. WPYogi's solution does, with a slight modification to the second value in the #masthead padding section. For anyone looking to remove all padding/margins from the header, add both these lines of custom CSS to a custom CSS plug-in:

    header#masthead hgroup {
    margin: 0;
    }
    header#masthead {
        padding: 10px 1 20px 0;
    }

    Change the 1 to a 0 for absolutely no padding/margins. I put it as a 1 so that there's a bit of space on the left side of the screen. See here: http://friedmanpictures.com

  17. jfeng22
    Member
    Posted 10 months ago #

    So i tried this code that csutom34 was kind enough to post

    header#masthead hgroup {
    margin: 0;
    }
    header#masthead {
    padding: 10px 1 20px 0;
    }

    However if i use this than all of my menu/bottom drop downs are messed up.

    Is there a way I can just move the menu bar all the way to the top of the page?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic