How to Overhang a WordPress Header Image in Genesis

Every 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:

One full width widget area

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.

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:

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.

You can do that. You could create 3 widget areas in the header. Place the logo in the middle widget and create 2 custom menus. Put half your menu tabs in one custom menu, the rest in the second custom menu then add the custom menus to your widgets.

James made a comment above here. He wants to do similar to you, Karla. I’ve had a play with making a middle overhang widget area. It is possible but it’s not very stable and requires me to write some Javascript to adjust the placement and dimensions of the widgets. I guess a quick alternative to the idea written in my reply above would be to use a full-width widget area in the header for the overhang and to add two new widget areas (one left floated, one right floated) below the header. This way you could create a full-width header… Read more »

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 »

It is possible to have a middle overhang widget but it’s more complicated than it first appears. The method I can come up with would work well in a non responsive theme. In a responsive theme the method keeps the page wider than it’s supposed to be. The middle widget overhang method requires Javascript or JQuery to measure the page width and adjust the widget positions accordingly. Not sure when I’ll get it posted.

It is possible to have a middle overhang widget but it’s more complicated than it first appears. The method I can come up with would work well in a non responsive theme. In a responsive theme the method keeps the page wider than it’s supposed to be. The middle widget overhang method requires Javascript or JQuery to measure the page width and adjust the widget positions accordingly. Not sure when I’ll get it posted.

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!

Hi Lisa, you’ll need to adjust the CSS to set the image position. If you’ve tried that and it doesn’t help, post a link to your website and I’ll take a look.

Vote Up0Vote Down Reply

5 years ago

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.

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.

Thank you Robert. The scrollbar will come up when items are beyond the right edge of the screen because you’re page is rendered from left to right (which is the correct way). Have you tried positioning the right-hand image with right:0; ?

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.

Vote Up0Vote Down Reply

5 years ago

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.

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?

Vote Up0Vote Down Reply

5 years ago

Derek Alvarez

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

Vote Up0Vote Down Reply

5 years ago

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