Home › Forums › Graphene WordPress theme › Support

Header Nav Not Pulling Custom Sprites Properly

  • jrothra

    February 9, 2012 at 7:04 am #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. 🙂

    Anonymous

    February 9, 2012 at 7:22 am #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

    February 10, 2012 at 8:23 pm #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!

    Anonymous

    February 11, 2012 at 8:28 am #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

    March 8, 2012 at 2:18 am #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).

    Anonymous

    March 8, 2012 at 2:25 am #23669

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

    jrothra

    March 8, 2012 at 2:27 am #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

    March 8, 2012 at 2:29 am #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.

    Anonymous

    March 8, 2012 at 2:31 am #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

    March 8, 2012 at 2:32 am #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)

  • 1
  • 2
  • You must be logged in to reply to this topic.