Spacing on Header and Footer

Jeff-

are you using firebug?

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!

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

@wpyogi – thank you so much for you advice. I’m sorry for my knowledge

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. https://friedmanpictures.com

Thanks,
Tommy

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

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.

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

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

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

You may also want to add:

header#masthead {
    padding: 0;
}

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 — https://friedmanpictures.com

Okay, try changing this one to:

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

You can adjust those if you prefer.

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

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.

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

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: https://friedmanpictures.com