Control the spacing and height of your website header to match your design preferences.
​

Header padding controls the space above and below your header content. Adjusting it changes how much breathing room your names, logo, and wedding date have, affecting the overall look and feel of your site!
​

Padding is the space between your header content (names or logo, wedding date, and RSVP button) and the edges of the header area. Your navigation menu and header image sit outside this area and aren't affected.
​

Padding top: Space above your header content
​

Padding bottom: Space below your header content
​

More padding = larger, more spacious header
Less padding = compact, streamlined header
​

Visual balance. Some headers feel cramped, others feel too roomy.
​

Match your style. Elegant weddings might want more space, casual weddings less.
​

Mobile optimization. Padding scales with screen width, so it's automatically smaller on phones.
​

Logo size. If you have a logo, more padding gives it room to breathe.
​

Personal preference. You might just like how a certain amount of padding looks!
​

Your header spacing updates immediately!
​

Padding is set as a percentage of the screen width, not in pixels. Each slider moves in 12 steps, from no padding at Less up to about 30% of the screen width at More.
​

Near Less: Compact, minimal
​

Middle: Comfortable, standard
​

Near More: Spacious, dramatic statement header
​

Top and bottom are set separately, so you can use different values:
​

More top, less bottom: Pushes content down from the very top
​

More bottom, less top: Creates space before your page content begins
​

Equal: Centered, balanced look
​

Different: Asymmetrical, can create interesting effects
​

Experiment to see what looks best!
​

Large logos: Give them space to shine
​

Minimal designs: Extra white space feels elegant
​

Desktop views: Larger screens can handle more padding
​

Make a statement: Lots of padding creates a bold, confident look
​

Mobile devices: Save screen space on small screens
​

Content-heavy sites: Get to your content faster
​

Minimalist themes: Some themes are designed with minimal padding
​

After adjusting:
​

There's no separate mobile setting. Because padding is a percentage of the screen width, the same setting gives a spacious header on computers and a smaller one on phones automatically.
​

Your header image sits above the padded header area, so padding doesn't change its size. If you've added a Header background, it fills the padded area, so more padding shows more of the background around your names.
​

Your navigation menu is separate from the header, so header padding doesn't change it.
​

Header padding is responsive in every theme: it's a percentage of the screen width, so it adjusts automatically based on screen size.
​

Padding affects how "heavy" your header feels:
​

More padding = lighter, airier
​

Less padding = denser, more compact
​

Match the feeling you want guests to have when they visit your site!
​

Padding works with alignment to create your header's look:
​

Centered content + lots of padding: Elegant, formal
​

Left-aligned content + minimal padding: Modern, clean
​

Center-aligned + minimal padding: Compact, efficient
​

Too much: Header takes up half the screen before guests see any content
​

Too little: Header feels cramped and hard to read
​

Unbalanced: Top and bottom padding are wildly different for no reason
​

Not testing mobile: Looks great on desktop, terrible on phones
​

The sliders don't show a unit. Behind the scenes, padding is a percentage (%) of the screen width, which is why it scales on smaller screens.
​

Padding: Space inside the header (around the content)
​

Margin: Space outside the header (between header and other elements)
​

These sliders adjust padding, the space inside the header. There's no header margin setting.
​

If you're unsure:
​

Start with the current setting
​

Adjust gradually (one or two slider steps at a time)
​

Note where the sliders started, since there's no button to reset them
​

Header padding stays the same as guests scroll.
​

Padding doesn't change the size of buttons or links, so it won't make anything harder to tap
​

Too much padding pushes your content further down, so guests scroll more on phones
​

Balance aesthetics with usability!
​

Header padding is a subtle detail that makes a big difference in how polished and professional your site feels. It's worth spending a few minutes to get it just right!
​