Skip navigation
Ginoem50
Currently Being Moderated

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

Jul 13, 2012 8:07 AM

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

 
Replies
  • Currently Being Moderated
    Jul 13, 2012 9:39 AM   in reply to Ginoem50

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 9:41 AM   in reply to Ginoem50

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 10:05 AM   in reply to Ginoem50

    Hi Hermann,

     

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

     

    Nicole - BCGurus.com

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 10:31 AM   in reply to Ginoem50

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 13, 2012 11:12 AM   in reply to Ginoem50

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2012 10:27 AM   in reply to Chad - BCGurus.com

    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.

     

    Schermafbeelding 2012-08-13.gif

     
    |
    Mark as:
  • mario_gudelj
    1,679 posts
    Oct 13, 2010
    Currently Being Moderated
    Aug 23, 2012 11:34 PM   in reply to Frank Grootaarts

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 24, 2012 5:25 AM   in reply to mario_gudelj

    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

     
    |
    Mark as:
  • mario_gudelj
    1,679 posts
    Oct 13, 2010
    Currently Being Moderated
    Aug 26, 2012 4:23 PM   in reply to Frank Grootaarts

    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:

     

    selected class.jpg

     

    -mario

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2012 11:19 PM   in reply to mario_gudelj

    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

     
    |
    Mark as:
  • mario_gudelj
    1,679 posts
    Oct 13, 2010
    Currently Being Moderated
    Aug 28, 2012 3:36 PM   in reply to Frank Grootaarts

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points