How to Overhang a WordPress Header Image in Genesis

Overhanging Header Logo ImageEvery once in awhile I’m asked to make the header logo image in a WordPress site jut out of the header area so it overlaps whatever is below it.

You might think it’s impossible. It’s not. Look at the image to the right for proof.

To make the header image hang over and stick out of the header area we need to remove the Genesis header action and replace it with a custom header action.

The trick is to remove the default header function and replace it with a new one that adds a second widget area to the header. Using a widget area lets us place a logo image in a text widget then use CSS to make the image pop out of the header box and hang over whatever is below it.

A bonus to replacing the default Genesis theme header function is that we can use a header image slider, a header parallax slider or even replace the header with a video. The options are limited by imagination only.

The Genesis theme header area usually shows a site’s logo image and it usually contains a right header widget area. Below here are two options for replacing this default header:

  1. One full width widget area
  2. Two 50% width widget areas

You can register and add as many widget areas as needed but one or two will meet most needs.

Don’t have Genesis? Get it here. It’s the best WP theme framework I’ve ever used.

Questions this page answers

  • How do I add more widgets to the Genesis header area?
  • How do I make a custom Genesis theme header?
  • How do I Make a two widget header in WordPress?
  • How do I put a header logo image into my Genesis theme so it sticks over the header area?
  • How do I make a transparent header image hover over my menu?
  • How do I make an image in my header that stands out?
  • How do I give my WordPress site a header that displays over the content below the header?

Instructions and caveats

  • Always work on a Genesis child theme.
  • All work is done in /wp-content/theme-name/functions.php and /wp-content/theme-name/style.css.
  • In these examples we remove the site title and site description from display.
  • Use HTML to make the new header clickable.
  • Any code that begins genesis_register_sidebar registers a widget area for use in Appearance > Widgets. You can place it higher up in functions.php to make it display closer to the top of the widget area list in the Widgets admin page.

Option one: one full width widget area

I would use this full width option to replace the header area with a slideshow, video or just a menu.

This header has a widget with the CSS class header-full.

The regular header is completely removed i.e no header image is displayed unless it is placed in the widget area.

  1. Open functions.php
  2. Add this code to the bottom of it:
    // Remove Genesis header and and replace with custom full width header
    
    genesis_register_sidebar( array(
        'id'            => 'header-full',
        'name'          => __( 'Header Area', 'theme-name' ),
        'description'   => __( 'Header widget area', 'theme-name' ),
    ) );
    
    unregister_sidebar( 'header-right' );
    remove_action( 'genesis_header', 'genesis_do_header' ); 
    add_action( 'genesis_header', 'genesis_do_new_header' ); 
    
    function genesis_do_new_header() { 
    
        if ( is_active_sidebar( 'header-full' ) || has_action( 'genesis_header_full' ) ) { 
            echo '<div class="widget-area header-full">'; 
            do_action( 'genesis_header_full' ); 
            dynamic_sidebar( 'header-full' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    }
  3. Save functions.php
  4. Open style.css
  5. Add this code to the bottom of it:
    .header-full {width:100%!important;float:left!important;clear:both;margin:0;}
    .header-full {position:absolute;z-index:99999!important;}
    #header {height: 100px!important;}
  6. Save style.css.

The second CSS line can be removed if you do not intend the content of the widget area to hang outside of the widget area.

Option two: two widget areas at 50% width each

This is useful when you need somewhere for an image and somewhere for a header menu.

This custom Genesis theme header area has two widgets. One has the CSS class header-left and the other has CSS class header-right.

This option does display the regular custom header image as the background to the wdigets. Remove the line do_action( ‘genesis_custom_header’ ); to stop the WordPress custom header image from displaying.

The height of the header is configured in functions.php with the code:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
	'width'	 => 940,
	'height' => 120
) );

Check your theme’s CSS for any height values for the header, title or title area.

Replace the header with a custom header

  1. Open functions.php
  2. Add this code to the bottom of it:
    // Remove Genesis header and and replace with custom two widget header
    
    genesis_register_sidebar( array(
        'id'            => 'header-left',
        'name'          => __( 'Left Header', 'theme-name' ),
        'description'   => __( 'Left hand header widget', 'theme-name' ),
    ) );
    
    remove_action( 'genesis_header', 'genesis_do_header' ); 
    add_action( 'genesis_header', 'genesis_do_new_header' ); 
    function genesis_do_new_header() {
    
        do_action( 'genesis_custom_header' );
    
        if ( is_active_sidebar( 'header-left' ) || has_action( 'genesis_header_left' ) ) { 
            echo '<div class="widget-area header-left">'; 
            do_action( 'genesis_header_left' ); 
            dynamic_sidebar( 'header-left' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    
        if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) { 
            echo '<div class="widget-area header-right">'; 
            do_action( 'genesis_header_right' ); 
            dynamic_sidebar( 'header-right' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    }
  3. Save functions.php
  4. Open style.css
  5. Add this code to the bottom of it:
    .header-left {width:50%!important;float:left!important;clear:left;margin:0;}
    .header-left {position:absolute;z-index:99999!important;}
    .header-right {width:50%!important;float:right!important;clear:right;margin:0;}
  6. Save style.css.

Wondering why we only register one sidebar and not two? The header-right sidebar already exists in the Genesis parent theme’s functions.php. We only need to restyle it.

How to overlay the header image

We will use the two widget header option to make an image in the header hang over the menu.

Overlapping an image over the menu will obstruct the menu items. We need to make sure the menu items remain clickable so we will use CSS to add a left-margin to the first item in the menu.

We will set a definite pixel width for the header-left widget.

This method removes the Genesis right header widget and adds a new right header widget. Doing it like this keeps the left and right widget areas together in Appearance > Widgets.

The header this creates looks like the one in the image at the top of this page.

Put this code into functions.php

  1. Open functions.php
  2. Add this code to the bottom of it:
    // Remove Genesis header and and replace with custom two widget header
    
    unregister_sidebar( 'header-right' );
    
    genesis_register_sidebar( array(
        'id'            => 'header-left',
        'name'          => __( 'Left Header', 'theme-name' ),
        'description'   => __( 'Left hand header widget', 'theme-name' ),
    ) );
    
    genesis_register_sidebar( array(
        'id'            => 'header-right',
        'name'          => __( 'Right Header', 'theme-name' ),
        'description'   => __( 'Right hand header widget', 'theme-name' ),
    ) );
    
    remove_action( 'genesis_header', 'genesis_do_header' ); 
    add_action( 'genesis_header', 'genesis_do_new_header' ); 
    function genesis_do_new_header() {
    
        do_action( 'genesis_site_title' ); 
        do_action( 'genesis_site_description' );
        do_action( 'genesis_custom_header' );
    
        if ( is_active_sidebar( 'header-left' ) || has_action( 'genesis_header_left' ) ) { 
            echo '<div class="widget-area header-left">'; 
            do_action( 'genesis_header_left' ); 
            dynamic_sidebar( 'header-left' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    
        if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) { 
            echo '<div class="widget-area header-right">'; 
            do_action( 'genesis_header_right' ); 
            dynamic_sidebar( 'header-right' ); 
            echo '</div><!-- end .widget-area -->'; 
        }
    }
  3. Save functions.php
  4. Open style.css
  5. Add this code to the bottom of it:
    .header-left {width:226px !important;float:left!important;clear:left;margin:0;}
    .header-left {position:absolute;z-index:99999!important;}
    .header-right {width:50%!important;float:right!important;clear:right;margin:0;}
    .first-menu-item {margin-left: 226px;}
  6. Save style.css.

The only difference between the code used here and the code used in Option Two (above) is in the CSS at step 5:

  • CSS class .header-left {} has its width set to 226px instead of 50%. Adjust the value from 123px to a width that matches your overhang image’s width i.e if your image is 200pixels wide then you should change the width of header-left {} to width:200px;.
  • There is a new CSS class selector of .first-menu-item. This has a margin-left attribute which pushes the menu items toward the right. Change 226px to match the width used for .header-left.

Add the images

  1. Go to Appearance > Header.
  2. Select or upload your main header background image (if using one).
  3. Go to Media > Add New.
  4. Upload your overhang image. Copy the upload URL.
  5. Go to Appearance > Widgets.
  6. Find the Left Header widget area. Drag a text widget into it.
  7. Put the following code into the text widget:
    <a href="http://example.com"><img src="http://example.com/wp-content/uploads/image.png" /></a>
  8. Change example.com to your site’s domain name. Change the src URL value to the URL of your image.

Indent the menu

  1. Go to Appearance > Menus.
  2. Click the button at the top of the screen that reads “Screen Options“.
  3. Put a tick next to CSS Classes.
  4. Collapse the screen options menu by clicking Screen Options again.
  5. Edit the first menu item (click the triangle to expand it).
  6. Put first-menu-item in the box below CSS Classes (Optional).
  7. Save the menu.
  8. Reload the site’s frontend.

If we wanted, we could use the header-right widget to add a menu or another image or anything else.

Miscellany

Your theme might have a height specified for the title area. If so you will need to make the widgets display on top of it by adding this to your CSS:

.header-left {
  position:absolute;
  z-index:99999!important;
}

Done!

Did you find this Genesis header guide helpful? Please comment and let me know.

Sharing is caring!

33
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Manuel

Awesome, thanks so much for taking the time to share this! Exactly what I needed. Saved my say!

this is fantastic!! I have a project that I’m wanting to use this on.

Now I’m curious: How much more difficult would it be to have the image in the middle (so it overhangs the middle of the nav menu) and have the menu spaced around it??

Thank you – that is a *great* idea. Would have never thought of that solution!

Thanks so much for posting this. I’m always looking for ways to make WordPress NOT look like WordPress and this one definitely is one of those tricks that I can use over and over again. However, like Karla, I’m interested in putting a part of a logo in the middle. I actually created three different widgets and followed your layout above – adding the middle widget. But, it appears that you can’t use the “clear:left” in the middle because that will move the widget to the left as well. Plus, when the image is put in the center widget, I… Read more »

I can’t see the code above..just gray boxes:(

Thanks for this, exactly what I was looking for. In your image at the top, the menu is just indented beyond the header image. In mine, the menu is floated right and begins at 50%, rather than right after the header. Any suggestions? Thank you!

Oprisan Tudorel

Could be very useful, if i could make it work.
Problem is, when i use it it pushes my main menu down. I tried to set menu position from css but no success. in only moves the menu down, not the graphics beneath it. Only the text. Also all i need is to set other dimensions of the header, but with no success. I looke in the css and i modified header class there but nothing happened.

Great tutorial and very helpful. Thank you so much.

I had a question: I have a website, and want to put the logo of this website hanging on the left and on the right of the main header. So outside the main wrap area. With your instructions I managed to get this positioned on the left, no problem, but when I position it on the right, a scrollbar suddenly comes up when the logo is ouside the viewscreen, eventhough this doesn’t come up when its out of view on the left. Any thoughts? I’d really appreciate the help.

After a lot of hours I decided to give up and do it the easier way. I placed it on the right side, positioned it by adjusting the margins, and hid the overflow-x so I wouldn’t get a horizontal scroll. It wasn’t working with the right:0; Because in smaller screens the image would go over (or behind the header, when I needed it to stay in its place.
When I figure out how to get it to position from the center I’ll post it here. Thanks for the help anyway! I appreciate it.

Kim

You… are awesome. It took a little tweaking, but I’ve finally managed to get my header the way I’ve always wanted. I do believe you’ve got yourself a new subscriber.

This is an excellent tutorial and it has made the logo work well on the desktop browser. However, I am curious as to what it has done to make the logo not position responsively for mobile devices. Do you have any ideas? I sure would appreciate any insight that you might have.

The website that I replied with in the form below is the one in question.

Thanks again for your work,

C

Nice post, I have used this on 2 projects I am working on, nice little find.

I will do as soon as they are live.

Derek Alvarez

I tried this by entering a custom menu in the header right section and lost all the css for the header nav. Is there a way to edit the code in the functions.php file that keeps the normal header widget and styling?

Derek Alvarez

Never mind, I just ended up using the primary navigation instead of the header navigation.

Garincha

Is there a way to do this in the genesis dynamik tool? I’ve tried it out the normal way but i cant seem to get it to work.

I tried doing this using the option one method. I am using the genesis theme and don’t have a left header under my widgets, only header area. and under appearance there isn’t a section for header either. here is a live view of what happened after I followed these steps. (I was making these changes to my parent theme because when I created a child theme it changed the whole look of my site” any suggestions? thanks so much! – Cole Mize http://www.colemizestudios.com

Olá.
Gostaria de saber se ainda posso usar esses códigos para fazer alterações na versão 2.1.2? Meu blog é esse: http://www.dietasblog.com.br e gostaria de colocar uma logo de 248 px de altura.

Obrigada

Ivone

I know this has been around a while, but thank you so much for posting it. It was exactly for what I was looking. Hopefully you still monitor this because I have a couple of follow up questions:

-How can I get the top image into my theme as in the demo graphic above? I am using eleven40 pro (www.thatsmyitguy.com

-How can I make the black band shorter and center the nav menu text vertically? (again as in the demo graphic) Whenever I get it sized like I want, the image floats too far below the header.

Thanks again,
Bo

Maura Fitzgerald

Very helpful tutorial. Thank you. But I see now that all inherit header right menu styling is gone. Do you have any tips to resolve?

shares