Header Nav Not Pulling Custom Sprites Properly

  • jrothra

    #3161

    Ever since the upgrade to 1.6, I’ve noticed that the navigation menu [em]seems[/em] to have reverted in part to the main theme, not the customized sprites used in the child theme.

    The URL: http://www.greggcountygop.com

    There are two things I’ve noticed.

    1. The drop down menu items are black, not blue, despite the customized sprite image in the child theme’s “image” folder.

    2. The far right and far left borders are black (mostly), but an enlargement shows that they are a combination black and fade from gray to black.

    I used the child theme per the instructions, and renamed our sprites somewhat.

    The code used for the navigation portion of the child theme’s CSS is as follows:

    /* =Navigation
    
    */

    .menu-bottom-shadow{
    background: url(images/sprite_h-JLR.png) left top repeat-x #eee;
    }

    #header-menu {
    background: url(images/sprite_h-JLR.png) left -3px repeat-x #05223b;
    }

    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -100px repeat-x #eee;
    }

    #header-menu ul li {
    background: url(images/sprite_h-JLR.png) left -377px repeat-x #dfdfdf;
    }

    #secondary-menu {
    background: url(images/sprite_h-JLR.png) left -540px repeat-x #222;
    }

    #secondary-menu > li:hover,
    #secondary-menu > li.current-menu-item,
    #secondary-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    }

    #secondary-menu ul li {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    }

    I’m not sure what more specific info is needed, but if you need more, please ask. 🙂

    Prasanna SP

    #23665

    Try adding !important to each element.

    Example,

    .menu-bottom-shadow{
    background: url(images/sprite_h-JLR.png) left top repeat-x #eee !important;
    }

    And to change the dead end colour of the header menu, use #header-menu-wrap

    #header-menu, #header-menu-wrap {
    background: url("images/sprite_h-JLR.png") repeat-x scroll left -3px #05223B !important;
    }

    jrothra

    #23666

    Sadly, the !important didn’t help. I’ll describe the results in the code below, results in all caps:

    /* =Navigation
    
    */

    .menu-bottom-shadow {
    background: url(images/sprite_h-JLR.png) left top repeat-x #eee !important;
    CAUSED NO VISIBLE EFFECT
    }

    #header-menu {
    background: url(images/sprite_h-JLR.png) left -3px repeat-x #05223b !important;
    CAUSED NO VISIBLE EFFECT
    }

    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -100px repeat-x #eee !important;
    CAUSED NO VISIBLE EFFECT
    }

    #header-menu ul li {
    background: url(images/sprite_h-JLR.png) left -377px repeat-x #dfdfdf !important;
    CAUSED SUBMENU ITEMS TO KEEP WHITE/GRAY BACKGROUND WITH WHITE TEXT,
    NOT THE IMAGE SPECIFIED IN THE SPRITE
    }

    #secondary-menu {
    background: url(images/sprite_h-JLR.png) left -540px repeat-x #222;
    NOT USING SECONDARY MENU, SO NOT ADDED HERE
    }

    #secondary-menu > li:hover,
    #secondary-menu > li.current-menu-item,
    #secondary-menu > li.current-menu-ancestor {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    NOT USING SECONDARY MENU, SO NOT ADDED HERE
    }

    #secondary-menu ul li {
    background: url(images/sprite_h-JLR.png) left -614px repeat-x #dfdfdf;
    NOT USING SECONDARY MENU, SO NOT ADDED HERE
    }

    The #header-menu-wrap advice worked perfectly, though!

    Prasanna SP

    #23667

    If any of the CSS doesn’t work in the child theme style sheet, try adding them in Graphene Options –> Display –> Custom CSS

    jrothra

    #23668

    Prasanna: Adding the changes you mentioned above to the Custom CSS section had no impact. The drop down options are still black, not the blue as dictated by the sprite (that image on the sprite is blue, not black).

    Josh

    #23669

    Where do you see blue in the sprite image for the dropdown color?

    jrothra

    #23670

    In the customized sprite I used to make the header, footer, etc. other colors. Here’s the sprite: http://www.greggcountygop.com/wp-content/themes/graphene-child/images/sprite_h-JLR.png

    jrothra

    #23671

    I’m going to widen it so the colors are easier to see (1px wide is hard to tell). Then I’ll link to it.

    Josh

    #23672

    Man.. that dark blue is much too close to black, and I can’t tell when switching the image on and off, if it’s taking.

    jrothra

    #23673

    Here’s the URL for that same sprite, except for only one change: changed the width from 1px to 200px: http://www.greggcountygop.com/wp-content/uploads/2012/03/sprite_h-JLR-200w.png

Viewing 10 posts - 1 through 10 (of 19 total)

You must be logged in to reply to this topic.