Header link color question..

[ROBD]

Could anybody tell me how to change the top navigation links without changing the bottom? It's pretty much the last thing I need to do and I'm "finished" with the site design, but I just can't seem to change one without changing the other.

I can get them to be two different colors using firebug, but then I can't translate that success to the admin control panel for some reason.

In firebug the top nav links are found here:

.navtabs
.navtab popupclosed
.navlink
color: #ffffff; <this line I want to control separately from the one below

and the bottom nav links are found here:

.navtabs
.navtab .selected
.tablinks
border-color: #000000;
color:#000000; <this line I want to control separately from the one above
display: block;
font-size: 12px;
line-height 29px;
etc..

I hope I made that clear enough. Any help would be appreciated. Thx.

 

[Jake Bunce]

Try this:

.navTabs .navTab a.navLink
{
	color: green !important;
}

.navTabs .navTab .tabLinks a
{
	color: red !important;
}

 

[ROBD]

Thanks Jake, but that didn't work for me. Most likely, I'm not following your directions correctly though as you have the right idea about what I'm trying to do.

I separately pasted this code:
.navTabs .navTab a.navLink
{
color: white !important;
}

.navTabs .navTab .tabLinks a
{
color: black !important;
}

into all five text boxes that accept code that contained the label "tab" or "tabs" and deleted it if it didn't work, and then went and pasted it in the next "tabs" section in this area:

• Appearance​
• Styles​
• Default Style​
• Style Property Groups​

Style Properties: Header and Navigation


And none of the five worked. If it helps, the bottom links are already black like I want them to be, and the highlighted upper link is white, but the rest of the upper links are black and I would like for all of the upper links to be white while having the lower links stay black.

??

 

[Shelley]

Works for me from the solution jake provided you may have some kind of conflict in your css overriding it? .

.navTabs .navTab a.navLink
{
    color: green !important;
}

.navTabs .navTab .tabLinks a
{
    color: red !important;
}

.navTabs .navTab.selected .navLink
{
    color: orange !important;
}

 

[ROBD]

Possibly so Shelley, can I ask where you pasted that code?

 

[Shelley]

paste that into your EXTRA.CSS Template for that specific style.

 

[ROBD]

Ahh..OK, thanks Shelley that did the trick. I'm sure that should have been obvious to me but it wasn't.

Really appreciate your help.

 

[Shelley]

Ahh..OK, thanks Shelley that did the trick. I'm sure that should have been obvious to me but it wasn't.

Really appreciate your help.

Ah. I automatically assumed you knew about the extra.css

Just a little extra info. Your able to modify every element through the extra.css template and I would suggest using it if your planning on customizing the navbar extensively. Also, extra.css is never overwritten during upgrades so your alterations will be left intact. Unsure whether you knew that but it doesn't hurt to mention as others may bump onto this thread and benefit from that info and jakes solution he posted.

 

[ROBD]

No, I had no clue, and that's great info to know.

Thanks again Shelley.