Adjusting header padding (includes: padding top, padding bottom)

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 navigation have, affecting the overall look and feel of your site!

What is header padding?

Padding is the space between your header content (names, logo, nav menu) and the edges of the header area.

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

Why adjust header padding?

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

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

Mobile optimization. Reduce padding on phones to save screen space.

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!

How to adjust header padding

  1. Go to Site in your main navigation
  2. Click the settings icon to open Site settings
  3. Click the Header tab at the top
  4. Find the Padding top slider and drag it to adjust the space above your header content
  5. Find the Padding bottom slider and drag it to adjust the space below your header content
  6. Each slider ranges from Less to More
  7. Click Save changes

Your header spacing updates immediately!

Padding values

Padding is usually measured in pixels (px).

Small padding: 10-20px (compact, minimal)

Medium padding: 30-50px (comfortable, standard)

Large padding: 60-100px (spacious, luxurious)

Extra large: 100px+ (dramatic, statement header)

Adjusting top and bottom independently

You can usually set 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!

When to use more padding

Large logos: Give them space to shine

Minimal designs: Extra white space feels elegant

Desktop views: Larger screens can handle more padding

Sticky headers: Headers that stay visible when scrolling often need padding

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

When to use less padding

Mobile devices: Save screen space on small screens

Lots of navigation links: Compact headers fit more links

Content-heavy sites: Get to your content faster

Minimalist themes: Some themes are designed with minimal padding

Sticky headers: Less padding when the header shrinks on scroll

Testing your padding

After adjusting:

  1. View your live site to see the result

  2. Check different pages to ensure consistency

  3. Test on mobile - padding affects phones differently

  4. Scroll the page - see if the header looks good while scrolling

  5. Get feedback - ask someone if it feels balanced

Mobile padding adjustments

Some systems let you set different padding for mobile vs. desktop:

Desktop: 60px top and bottom

Mobile: 20px top and bottom

This gives you a spacious header on computers but saves space on phones!

Padding with header images

If you have a header image, padding affects how much space is around it:

More padding: Image appears smaller with space around it

Less padding: Image is more prominent

Find the right balance for your design!

Padding with navigation menus

Your navigation menu is part of the header, so padding affects it too:

Generous padding: Menu has lots of space, easy to click

Tight padding: Menu feels compact, might be harder to tap on mobile

Consider usability when adjusting!

Responsive design

Responsive padding: Automatically adjusts based on screen size

Fixed padding: Same on all devices

Responsive is usually better! Check if your theme supports it.

Visual weight

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!

Alignment and centering

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

Common padding mistakes

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

Padding units

Most systems use pixels (px), but you might see:

px (pixels): Fixed spacing (most common)

em/rem: Relative to text size

% (percent): Relative to container size

Pixels are simplest and most predictable!

Padding vs. margin

Padding: Space inside the header (around the content)

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

You're probably adjusting padding, but some systems use margin. They work similarly!

Default padding

Every theme has default padding. If you're unsure:

Start with the default

Adjust gradually (10-20px at a time)

Compare to the default if you want to reset

Sticky headers and padding

If your header sticks to the top when scrolling:

Full padding when at top: 60px feels spacious

Reduced padding when scrolling: 30px keeps it compact

Some themes automatically reduce padding on sticky headers!

Accessibility

Enough padding makes touch targets bigger (good for mobile tapping)

Too little padding makes buttons hard to click

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!