Center Custom Header Image in Eleven40 Pro Theme

Rick asked this question:

I’ve been trying to move the logo to the center of the header area. Can someone take a look and provide direction?

In this tutorial, i’ll show you how to add a custom image size to the header of the Eleven40 Pro theme by StudioPress and center it.

Update : Here’s a updated solution which centers the logo and site title above a centered nav menu.

There’s a few steps you need to take:

1. Change the values for width and height around line 30 of the functions.php file.
2. Modify the CSS for the height of your image
3. Add CSS for the site-header wrap width that matches the width of your image

Step 1. Custom Header Dimensions

In your child themes functions file, modify the values for the width and height to match your header image like this example:

Now you can go to Appearance > Custom Header and upload your image without it forcing you to crop the size:

Step 2. Change Header Image Height Value

Line 956 of your child themes style.css file, change the value for the min-height from 65px to the height of your image which is 265px in this example.

.header-image .site-title a {
    float: left;
    min-height: 265px;
    width: 100%;
}

Step 3. Add CSS for Site Header Wrap

Add this CSS in the Site Header section of your child themes style.css file. Make sure the width value matches the width of your image:

.site-header .wrap {
    width: 420px; 
}

That’s it.

Here’s the result;

Here’s some additional customization you can make to remove the dark background and add a height which matches your header image around Line 874 of your style sheet :

.site-header {
    /* background: url(images/texture.png); */
    min-height: 265px;
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
}

Related Tutorials

• Center Site Header Elements On The Same Line
• Center Logo Above Centered Nav Menu In Eleven40 Pro
• How To Center Your Header Image or Logo In Genesis Sample Theme