Back to Community
Home / Community / Theme → Twenty twelve

How to Reduce or Remove Unwanted White Space in the Twenty Twelve Theme

24 threads Sep 10, 2025 Theme → Twenty twelve

Content

A common challenge for users of the Twenty Twelve theme is managing the amount of white space around elements like the header, navigation menu, and post titles. Based on community discussions, this is a frequent request that can be solved with some targeted CSS adjustments.

Why Does This Space Exist?

The Twenty Twelve theme, like many WordPress themes, uses CSS properties like margin and padding to create visual breathing room and structure around different elements. This spacing is part of the theme's core design. However, when customizing a site with a new logo, a different header image, or a specific layout goal, this default spacing can sometimes feel excessive.

Important First Step: Use a Child Theme or CSS Plugin

Before making any changes, it is crucial to protect your modifications from being overwritten by future theme updates. The recommended methods are:

  • Child Theme: Creating a child theme is the best practice for any theme modifications. This allows you to override the parent theme's styles and templates safely.
  • Custom CSS Plugin: If you are only making CSS changes, a plugin like 'Custom CSS Manager' or the custom CSS module in 'Jetpack' is a quick and effective alternative.

Common Spacing Issues and Their Solutions

Using the developer tools in your browser (like Firefox's Firebug or Chrome's Developer Tools) is highly recommended to inspect your specific site and identify the exact CSS selectors causing the space.

1. Space Above the Entire Site or Below the Header

To remove space at the very top of the page or around the main container, you may need to adjust the margin on the #page element.

#page {
    margin-top: 0;
}

2. Space Between the Header and Navigation Menu (or Vice Versa)

The .site-header element has padding that creates space below it. Reducing or removing this padding can close the gap.

body .site-header {
    padding-bottom: 0;
}

3. Space Between the Navigation Menu and Page Content

The main content area (.site-content) has a top margin that creates space below the header/navigation.

body .site-content {
    margin-top: 0;
}

4. Space Between Individual Posts or Around Post Titles/Footers

Individual articles and their meta data (like categories and tags) have their own spacing.

.site-content article {
    margin-bottom: 20px; /* Adjust this value */
}

footer.entry-meta {
    margin-top: 20px; /* Adjust this value */
}

5. Space Between Navigation Menu Items

To reduce the space between items in the menu bar to fit more links or change the appearance, target the list items.

.main-navigation li {
    margin-right: 20px; /* Decrease this value from the default */
}

6. Space Within the Navigation Menu Bar (Its Height)

The height of the menu bar is often controlled by the line-height property on the links inside it.

.main-navigation li a {
    line-height: 2; /* Adjust this value */
}

Testing and Refining

CSS adjustments often require some fine-tuning. Start with a value of 0 to see the maximum effect, and then gradually increase the value until you achieve the desired spacing. Remember to test your changes on different screen sizes to ensure your layout remains responsive.

By using these CSS snippets in a child theme or custom CSS plugin, you can gain precise control over the layout of your Twenty Twelve theme and achieve a look that perfectly suits your needs.

Related Support Threads Support