Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header background image, Overlay Logo On Top of Nav Bar & Split Nav Bar Items
Tagged: header background image, header image, NAV bar, overlap logo and navigation bar, overlay, primary nav bar, widgetize header
- This topic has 13 replies, 5 voices, and was last updated 10 years, 7 months ago by henryyoung101.
-
AuthorPosts
-
March 20, 2013 at 12:06 am #29604RitaMember
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;
}March 20, 2013 at 2:13 pm #29785AnitaKeymasterLooking to get you some help here. Hang on.
Love coffee, chocolate and my Bella!
March 20, 2013 at 2:22 pm #29791RitaMemberThanks Anita!
March 21, 2013 at 3:06 pm #30273RitaMemberOk. 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....
March 21, 2013 at 10:26 pm #30372RitaMemberOk... 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
April 25, 2013 at 3:40 am #37565patfancygirlParticipantI'm curious how you got it to work. Care to share the codes you used? Thanks!
May 22, 2013 at 10:43 am #42218RitaMemberSorry. 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.
July 19, 2013 at 10:23 pm #51559henryyoung101MemberHi, were you able to find a permanent fix to this problem?
thanksJuly 25, 2013 at 9:57 am #52452Cyndy OttyMemberNot 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.comJuly 27, 2013 at 10:30 am #52817RitaMemberI'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!
July 27, 2013 at 10:37 am #52822AnitaKeymasterThen you need to make those adjustments for the iPad down under the responsive design css or some people call it media queries.
Love coffee, chocolate and my Bella!
July 27, 2013 at 10:40 am #52825henryyoung101MemberThanks 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,
HenryJuly 30, 2013 at 11:22 am #53222Cyndy OttyMember@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.comJuly 31, 2013 at 6:19 am #53369henryyoung101MemberI 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.