Nav Menu Images

[makeylon 0]

I have Platform Pro and I am trying to emulate an image based navigation menu similar to that found at apple.com I've searched through the forums and docs and can't find any information. How would one go about implementing a nav menu similar to the one on apple.com? Thanks in advance for any help.

[makeylon 0]

I guess I should also clarify that I'm using the Base child theme. I've tried editing the nav colors in the base.css file using the following code: .sf-menu li { color: #ffffff!important; background: #bbb; } .sf-menu li li { color:#ffffff!important; background: #bbb; } .sf-menu li li li { color:#ffffff!important; background: #bbb; } .sf-menu li:hover, .sf-menu li.sfHover{ color: #fff !important; background: #555; The background colors seem to change, but the actual text color seems to be overridden by some other css file. I was under the impression that changes to base.css would override any other css files to keep them valid when a theme update occurs. Anyhow, if anybody could tell me the correct css statements to use, the correct css file to edit, and perhaps a method of using images for nav similar to apple.com, I would be appreciative.

[Andrew 207]

add all your css changes to `base.css` ... Are you using Firebug to help you do this?

[makeylon 0]

Yes, as I stated, I've added all the changes to base.css. And yes, I have Firebug.

[Kate 3]

@Mark A couple of things... First, make sure you have a space before the "!important" declaration. Second, not sure if this is the case in the actual CSS or not, but your last set of styles is missing the end bracket.

[makeylon 0]

Kate, Yes, I missed copying the end bracket, it is there. I also put the space back in before the important declaration. I had tried it both ways, just to see. Still no change. And would I use the same css to insert a background image? Is that even possible? Would I have to use 3 images (left, middle, right) to cover the possibility of different width nav tabs? And how would I do that?

[makeylon 0]

The color declaration in base.css is being overridden by something else, though I'm not sure what. All I know is in firebug there is a linestrike through the statement.

[Kate 3]

Are you able to give a link to the site?

[makeylon 0]

Sure. I've added a temporary password for access. U: traders P: reserve

[makeylon 0]

Ooops. And the link is http://tradersreserveaffiliates.com

[Kate 3]

@Mark I should've noticed this earlier, sorry... When you have links like that inside of a lis, you need to target the link, not the li. So, in order to change the color to white it would be:

.sf-menu li a{
	color: #ffffff !important;
	}

Additionally, if you're trying to set the background, and you want it to change on hover, you can use the anchor tag instead of the li. Most modern, standards compliant browsers allow hover on the li, but just in case... not sure what your target browsers are

[makeylon 0]

Okay, I'm confused. I thought the anchor tag was the 'a' part of the declaration? Target browsers are modern, primarily FF and IE (even tho I hate IE, people still use it for some ungodly reason) Don't forget, I'm only trying to change the colors until I can figure out how to use an image background for the nav tabs... So I should be able to have something like this work for just color changes? // to get dark background .sf-menu li { background: #bbb; } .sf-menu li li { background: #bbb; } .sf-menu li li li { background: #bbb; } .sf-menu li:hover, .sf-menu li.sfHover { background: #555; } // to get white text .sf-menu li a { color: #ffffff !important; } .sf-menu li li a { color:#ffffff !important; } .sf-menu li li li a { color:#ffffff !important; } .sf-menu li:hover, .sf-menu li.sfHover a { color: #ffffff !important; }

[cmunns 16]

your problem is that you are not being specific enough. If the actual CSS in the theme is `#primary-nav ul.sf-menu li a {}` and you write a rule saying `.sf-menu li a {}` You will not override the old rule as it takes precedence.

[makeylon 0]

Okay, thank you. I'll work with it and see what I can come up with. It would really help if there was documentation as to what the exact css rules are that handle all the aspects of the nav menu. Or better yet, have options in the theme admin to be able to make changes more easily. As for the original issue, anybody know how to substitute images as the background for the tabs? Given the tabs can be of varying length based on length of the word(s), I'd assume there would have to be 3 images used somehow (left middle right)?