Header background image, Overlay Logo On Top of Nav Bar & Split Nav Bar Items

[Rita]

I'm trying to overlay my logo on top of the nav bar which would then split my navigation items in 1/2 and have an image in the background of my header.

I followed the instructions on this post: http://www.studiopress.community/topic/overhang-header-image/ and added three widgets to the header instead of two. I removed the “clear:left;” from the center header as instructed and also removed overflow: hidden; from the #header rule as instructed.

It's just not working for me.

1. I placed the overlay logo into the center widget and it still floats all the way to the left.

2. I created a custom header menu for the right header widget and thought it was going to line up right on the nav, but clearly the code isn't for that

3. The header background image isn't coming up. I tried uploading it to the Appearance / header area, but it will only allow me to upload 1/2 of the image.

Site is http://www.ritapcheng.com/

Basically, I want it to look like this: http://mamadrama.com/ or even http://silverlakepictureshow.com/

 

Here's the code I added to functions.php

// Remove Genesis header and and replace with custom three widget header

unregister_sidebar( 'header-right' );

genesis_register_sidebar( array(
'id' => 'header-left',
'name' => __( 'Left Header', 'luscious' ),
'description' => __( 'Left hand header widget', 'luscious' ),
) );

genesis_register_sidebar( array(
'id' => 'header-center',
'name' => __( 'Center Header', 'luscious' ),
'description' => __( 'Center header widget', 'luscious' ),
) );

genesis_register_sidebar( array(
'id' => 'header-right',
'name' => __( 'Right Header', 'luscious' ),
'description' => __( 'Right hand header widget', 'luscious' ),
) );

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-center' ) || has_action( 'genesis_header_center' ) ) {
echo '<div class="widget-area header-center">';
do_action( 'genesis_header_center' );
dynamic_sidebar( 'header-center' );
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 -->';
}
}

 

And here's the code I added to CSS.

/* Widget Header Overlay
------------------------------------------------------------ */
.header-left {width:33% !important;float:left!important;clear:left;margin:0;}
.header-left {position:absolute;z-index:99999!important;}
.header-center {width:200px !important;float:center!important;margin:0;}
.header-center {position:absolute;z-index:99999!important;}
.header-right {width:33%!important;float:right!important;clear:right;margin:0;}
.first-menu-item {margin-left: 200px;}

 

and the code for the header image
#header {
background: url(images/skyline.png);
margin: 0 auto;
min-height: 45px; (I tried 100px also thinking may be it wasn't high enough, but that didn't work)
width: 960px;
}

[AnitaC]

Looking to get you some help here. Hang on.

---

Need help with customization or troubleshooting? Reach out to me.

[Rita]

Thanks Anita!

[Rita]

Ok. I got the logo to overlay the nav bar finally... without adding the extra widgets.

But, I can't seem to get the menu items to shift over so they're not covered by the logo....

[Rita]

Ok... I did a "quick fix" for it without making a widgeted area.

BUT, I'd really like to do it properly so I'm going to keep this open in hopes someone figures it out.

the site I have it on is njdigitalmoms.com

[patfancygirl]

I'm curious how you got it to work.  Care to share the codes you used? Thanks!

[Rita]

Sorry. The thread got lost in my email. I'd love to. I just need to remember exactly what it was. Once I do, I'll definitely post it here.

The only thing is, that it's a quick fix and not a permanent one. What I did shifts the menu based on how wide your screen is. So, if the image is on top of the menu, a menu item might be behind the image if you're on an iPad, but visible if you're on the computer.

[henryyoung101]

Hi, were you able to find a permanent fix to this problem?
thanks

[Cyndy Otty]

Not exactly the most elegant solution I've ever come up with, but I ended up accomplishing this by adding an entry via the Custom Menu and styling that item with CSS to show the image and be in the middle. See: http://icgoldphotography.com

The best way to do this would be if you could define each menu item's width (i.e., in this case via #nav ul li), but unfortunately I couldn't do that with the size of the menu menu/length of words/logo image size without having to redo the sizing of everything on the site. So I ended up having to push the image a bit in positioning to get it centered.

This probably won't work so well if you don't have the same number of menu items on either side of the image, by the way.

---

— Cyndy Otty —
http://gentlewit.com

[Rita]

I'm sorry I never replied. Life has been hectic.

Yes, I defined the right two items on the menu with IDs so they are aligned right due to the IDs used. I tried a variety of ids and the ones I have on there now are the only ones that would get those two menu items out from behind the logo.

The problem with the IDs is when you have a visitor on say... an iPad, the width of the site on their iPad is thinner than a computer. The logo moves with the width of their gadget, but the menu items are static, so could end up behind the logo.

So, I'm going to see if what you did will fix that issue on our site. Thanks!

[AnitaC]

Then you need to make those adjustments for the iPad down under the responsive design css or some people call it media queries.

---

Need help with customization or troubleshooting? Reach out to me.

[henryyoung101]

Thanks for the responses. I think my problem is a little simpler because I'm trying to overlap the site's logo and the left side of the site. Although it may be simpler I still cannot figure it out. This is the site : http://crossings.direcconnec.com
You can see that the bottom of the logo is disappearing under the menu bar. What can I do to fix this?
thanks,
Henry

[Cyndy Otty]

@henryyoung101 - Not sure what you mean by it disappearing under the menu. It looks like the logo image is overlapping over the menu bar. What I do notice, though, is when the page is zoomed that same image moves behind the header text.

---

— Cyndy Otty —
http://gentlewit.com

[henryyoung101]

I was able to get it to overlap but now having some other issues, one like you mention Cindy, it disappears behind the header when it is zoomed. I first noticed that when I looked at a mobile version. I'll have to go back to work on these but if anyone has had this problem, please post what you have done.
thanks

[Author]

Posts