Back to Community
Home / Community / Theme → Twenty twelve

How to Reposition and Customize the Header in Twenty Twelve

30 threads Sep 9, 2025 Theme → Twenty twelve

Content

Customizing the header is one of the most common tasks for users of the Twenty Twelve theme. A frequent point of confusion is the theme's default structure, which places the navigation menu above the header image. Many users wish to reverse this order, center the image, or integrate other elements like text or videos. This guide covers the most effective methods to achieve these customizations.

Why This Happens

The Twenty Twelve theme is designed with a specific, responsive layout in mind. Its default behavior of placing the menu above the header image is intentional. To change this or any other core styling, modifications must be made. The safest and most recommended way to do this is by using a child theme, which protects your changes from being overwritten during theme updates.

Common Solutions

1. Moving the Header Image Above the Menu

This is the most requested change. The solution involves editing your child theme's header.php file to reposition the HTML code for the navigation menu.

  1. In your child theme, copy the header.php file from the parent Twenty Twelve theme.
  2. Locate the section of code that begins with <nav id="site-navigation" class="main-navigation" role="navigation">.
  3. Cut this entire navigation section and paste it below the section that contains the <?php if ( get_header_image() ) : ?> conditional statement, which outputs the header image.
  4. Save the file. The header image will now appear above the menu.

Note: Always test your site after making these changes, as altering the structure can sometimes affect the responsive design on mobile devices.

2. Centering the Header Image

If your header image is aligned to the left, you can center it with CSS. Add the following code to your child theme's style.css file or via a Custom CSS plugin:

.header-image {
    display: block;
    margin: 0 auto;
}

If this doesn't work, a more specific selector might be needed. Using a browser inspector tool like Firebug can help you identify the correct CSS class to target.

3. Removing the Shadow and Making the Header Transparent

To remove the box-shadow from the header image and make it transparent, use this CSS:

.header-image {
    box-shadow: none !important;
    background: transparent !important;
}

4. Adding a Default Header Image in a Child Theme

To set a default header image that won't be erased on update, avoid modifying the parent theme's functions.php. Instead, add the following code to your child theme's functions.php file to define a custom header:

function my_child_theme_setup() {
    $args = array(
        'default-image'      => get_stylesheet_directory_uri() . '/images/your-default-image.jpg',
        'width'              => 1000,
        'height'             => 200,
        'flex-width'         => true,
        'flex-height'        => true,
    );
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

Replace /images/your-default-image.jpg with the path to your image.

5. Creating a Full-Width Header

To make the header image span the full width of the page and remove the default white margins, you can use CSS to adjust the padding:

body .site {
    padding-left: 0;
    padding-right: 0;
}
#main, #colophon, #site-navigation {
    padding-left: 30px;
    padding-right: 30px;
}

Important Considerations

  • Always Use a Child Theme: Directly editing the Twenty Twelve theme files is not recommended. Any changes will be lost when the theme is updated. A child theme ensures your customizations are preserved.
  • Test Responsiveness: Twenty Twelve is a responsive theme. After making structural or CSS changes, always check how your site looks on different screen sizes (desktop, tablet, mobile).
  • Use Browser Tools: Tools like Chrome Developer Tools or Firefox Firebug are invaluable for testing CSS changes in real-time before adding them to your theme files.

By following these methods, you can significantly alter the default header behavior of the Twenty Twelve theme to better suit your website's design. Remember to clear your cache after making changes to see the results.

Related Support Threads Support