Header Nav Not Pulling Custom Sprites Properly
-
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. 🙂
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;
}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!If any of the CSS doesn’t work in the child theme style sheet, try adding them in Graphene Options –> Display –> Custom CSS
Where do you see blue in the sprite image for the dropdown color?
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
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.
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.