• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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?

rick

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:

custom header image 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;

center header image

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

Reader Interactions

Comments

  1. John says

    September 16, 2014 at 7:44 pm

    I have followed your advice your and my logo is now centered but nor responsive, any advice?
    My theme is Streamline pro ver 3.0.1

    Log in to Reply
    • Brad Dalton says

      September 16, 2014 at 7:54 pm

      Would you like me to write the CSS for your Media Queries John?

      Just to confirm, this post is about centering the logo in the Eleven40Pro theme not Streamline pro.

      Log in to Reply
      • John says

        September 17, 2014 at 11:06 am

        Yes I know this is for Eleven40Pro but I would be glad if you could write it for Streamline Pro.

        Log in to Reply
        • Brad Dalton says

          September 17, 2014 at 11:50 am

          John

          What is your site address?

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.