How to make menu-item of current page appear in a different font color?

[Ginoem50]

Hi,

My menu-bar works just fine. Hovering the links I get the text to take display the desired color. Now I want the menu-item of the selected page to show a third color.

With live-code enabled in Dreamweaver CS6, I can see the following code being generated by the Dynamic menu:

<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output --><div id="cat_549633_divs"><ul id="nav_549633"><li class="selected"><a href="/home.html">Home</a></li><li><a href="/leistungen.html">Leistungen</a></li><li><a href="/uhrenservice.html">Uhrenservice</a></li><li><a href="/versteigerungen.html">Versteigerungen</a></li><li><a href="/diamanten.html">Diamanten</a></li><li><a href="/ueber_uns.html">Über uns</a></li><li><a href="/kontakt.html">Kontakt</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_549633');</script><!-- Dynamic Menu End CSS Output -->

The class .selected is being created in the first list-item (home) as this is the current page.

And here is my CSS:

#nav_549633 {

          float: right;

          list-style-type: none;

          padding-top: 5px;

}

#nav_549633 li {

          float: left;

          text-align: left;

}

#nav_549633 li a {

          color:white;

          text-decoration: none;

          margin: 0 27px 0 0;

          font-size: 13px;

          text-transform: uppercase;

}

#nav_549633 li a:hover {

          color: yellow;

}

.selected {

          color: green;

}

The font color green does not appear. It is still white.

In order to see if the class is "working" I tried some other attributes, that DO work!

.selected {

  color: green;

  padding: 20px

  background-color: blue;

}

In this case, the item appears as a blue box with 20px-padding, just as expected - but the font-color is still white.

Can anyone help me?

Regards,

Herman

[Chad_-_BCGurus_com · Accepted solution]

Hello Ginoem50,

Looking at your css it looks like the selected class is not working because the #nav_549633 li a is more specific so it is the one that is listened to.

change .selected to #nav_549633 li.selected a and it should work.

Hope this helps,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[Frank_Grootaarts]

Hi there,

I want three things to change in my dynamic menu, it's all retalted so i thought i post them here:

1. I want to change the color from the selected item. The link which you have chosen. I work with submenu's and the solution provided here chages the color of all my submenu-items.
2. Is there a way to change the color of the submenu-item arrows?
3. Is it possible to change only the color from my root items?

Thank for all the help.

[mario_gudelj]

Hi Frank,

You need to post a URL here so that people can Firebug the code and tell you how to do it.

Cheers,

-mario

[Frank_Grootaarts]

Hi Mario,

Here's the link to my site:

http://grootaartseuronics.businesscatalyst.com/index.html

I have found a solution myself for 2 of the 3 questions i had:

I have deleted/changed this div: #nav_1371057 li li

And created a few new ones:

#nav_1371057 li li a, #nav_1371057 li li a:visited (To control the link en visited link colors in the sub-menu other than the root-menu)

#nav_1371057 li li a:hover (to control the hover in the sub-menu other than the root-menu if nessesary)

#nav_1371057 li li.selected a (to control the selected link and let the link change color or bolder like in my case)

Here are the CSS styles I used:

#nav_1371057 li li.selected a { /*Dit veranderd de dikte (bold) van de geselecteerde link in het submenu, dus de pagina waar je bent*/
font-weight:bolder;
}

#nav_1371057 li li a, #nav_1371057 li li a:visited{
background:  #006;
color:#ffffff;
}

#nav_1371057 li li a:hover{
background:  #999;
color:#ffffff;
}

Only thing i can't figure out is how I can change/control the color of the arrow which is black now. And i want to make it blue.

Thanks,

Frank

[mario_gudelj]

Hi Frank,

Whenever you click on a menu item it will have a class called "selected" applied to it's LI. You can use this class to set the color of the link text e.g.

.selected a {color:red}

See this screenshot:

-mario

[Frank_Grootaarts]

Hi Mario,

Yes i use the selected state to make the selected link bolder.

Is there a way to change the color of the arrows?

Thank,

Frank

[mario_gudelj]

That's actually not possible, Frank. You'd need to disable the arrows in admin and then use CSS to apply your own arrow as a background image.

Cheers,

-mario

[Pro Com]

Try adding #nav_549633 li a to your .selected css to become #nav_549633 li.selected a {color: green;} to ensure you target the specific a link.  In your css above the green is applied to the li tag and is then replaced by the more specific #nav_549633 li a declaration which puts it white again.

Steve

[Ginoem50]

Hi Chad, hi Steve,

thank´s a lot to you both, as your answers ARE the solution to the problem. You made my day.

Lots of greetings from Germany,

Cheers,

Hermann

[Nicole_-_BCGurus_com]

Hi Hermann,

ich glaub Chad war ein bisschen schneller mit der richtigen Antwort, waere nur fair ihm die Ehre zu geben

Nicole - BCGurus.com

[Ginoem50]

Hi Nicole,

wo du Recht hast hast du Recht. Hab die Änderung durchgeführt.

Bin übrigens völlig überrascht, eine Antwort in perfektem Deutsch zu bekommen!?

Liebe Grüße aus Mannheim,

Hermann

[Nicole_-_BCGurus_com]

Haha danke, sehr nett! Wir sammeln unsere Punkte wann und wo wir koennen

Haette ja auch gar nicht geantwortet, haettest du nicht aus Deutschland gegruesst. Und dann noch aus Mannheim! Meine alte Uni-Stadt!

Bin gebuertig aus Potsdam, lebe seit 2 Jahren in Denver. Schoen mal was von einem BC Nutzer aus Deutschland zu hoeren

LG,

Nicole

[Ginoem50]

Das ist der Hammer!

Wie groß ist die Wahrscheinlichkeit, dass sowas passiert? Die geht so ziemlich gegen 0! Umso schöner ist es, dass es dann eben doch passiert

Ich lebe und arbeite hier seit 3 Jahren (in U6) und komme aus der Nähe von Speyer (also gleich um die Ecke!)

Wann uns was hast du hier studiert?

LG,

Hermann

[Nicole_-_BCGurus_com]

N4 fuer 3 Jahre Digitale Medien an der DHBW Mannheim. Schoene Zeit!

[Ginoem50]

Dann waren wir ja vielleicht mal sozusagen Quadrat-Nachbarn! Find ich klasse!

Auch ich wünsche Dir eine gute Zeit.

Liebe Grüße an die Potsdamer Mannheimerin...

Hermann