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

Community Forums Forums Design Tips and Tricks Header background image, Overlay Logo On Top of Nav Bar & Split Nav Bar Items

This topic is: not resolved

This topic contains 13 replies, has 5 voices, and was last updated by  henryyoung101 1 year, 2 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #29604

    YippyMomma
    Participant
    Post count: 89

    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.com/forums/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;
    }

    #29785

    AC
    Blocked
    Post count: 7712

    Looking to get you some help here. Hang on.

    #29791

    YippyMomma
    Participant
    Post count: 89

    Thanks Anita!

    #30273

    YippyMomma
    Participant
    Post count: 89

    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….

    #30372

    YippyMomma
    Participant
    Post count: 89

    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

    #37565

    patfancygirl
    Participant
    Post count: 4

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

    #42218

    YippyMomma
    Participant
    Post count: 89

    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.

    #51559

    henryyoung101
    Participant
    Post count: 5

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

    #52452

    Cyndy Otty
    Participant
    Post count: 11

    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

    • This reply was modified 1 year, 2 months ago by  Cyndy Otty.
    • This reply was modified 1 year, 2 months ago by  Cyndy Otty.
    #52817

    YippyMomma
    Participant
    Post count: 89

    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!

    • This reply was modified 1 year, 2 months ago by  YippyMomma.
    • This reply was modified 1 year, 2 months ago by  YippyMomma.
    #52822

    AC
    Blocked
    Post count: 7712

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

    #52825

    henryyoung101
    Participant
    Post count: 5

    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

    #53222

    Cyndy Otty
    Participant
    Post count: 11

    @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

    • This reply was modified 1 year, 2 months ago by  Cyndy Otty.
    • This reply was modified 1 year, 2 months ago by  Cyndy Otty.
    #53369

    henryyoung101
    Participant
    Post count: 5

    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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.