Change menu text color in navigation / menu - is it possible?

[Darwin Web Design]

Hi there
Is there any way I can make the navigational menu text colour change in the menu?  I have done a few sites in the past and can change the background colours easily enough but not the text hover colour or text menu active colour.  The css is below and I've tried many things but can't get it to work, any feedback would be greatly appreciated.

Thanks 

/* Styling the basic apperance of the menu elements */
#primary-nav a {
  color: #ffffff;
  display: block;
  margin: 0px;
  padding: .5em 0 .5em 0;
  font-size: 1.5em;
  font-weight: bold; 
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #BF0B00;
  min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  font-weight: bold;
  color: #000000;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
color: #000000;
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  color: 000000;
  font-weight: bold;
}

[RonnyK]

Do you have a link.

I use:

Code: Select all

/* hover state for all links */
div#menu_vert a:hover {
   background-color: #00447A;
   color: #FFF;    
}
div#menu_vert a.activeparent:hover {
   background-color: #00447A;
   color: #FFF;    
}

/* 
active parent, that is the first-level parent 
of a child page that is the current page 
*/
div#menu_vert li a.activeparent {
   background-color: #00447A;
   color: #FFF;    
}

to have the text being white on hover/active. If you have FF, you can use "Web Developer" as an add-on, see:

http://forum.cmsmadesimple.org/index.ph ... l#msg54320

to check what elements need to be styled.

Ronny

[Darwin Web Design]

Hi Ronny
Thank you for your quick reply. Unfortunately I can't provide a link as yet because I develop on my local wamp server as I find this quicker than developing the site online. I usually don't upload the site until it is finished for the client.

I use the firefox developer extension and find it fantastic!  Even with this, I find I can't change the colour of the text only the background and borders.  Do you see an error in my css ?  I tried adding yours but maybe I am meant to add something in my html too?

My html reads:



1: Home


2: About Us


3: Contact








I tried your code and replaced your div#'menu_vertical' with my 'left-col' id... no luck as yet...

Any other suggestions appreciated, thanks. 

[RonnyK]

If you use the web developer, you can check "show CSS styles" or something similar, (I don't have FF from over where I'm at the moment.). With that you see all elements displayed, where your mouse is standing, so if you go over the menu-entry that you want styled differently, the developer-bar should show the element that is "active".

Ronny

[Darwin Web Design]

Hi and thanks again for your feedback Ronny,
I have been using the web developer tool and find it fantastic (infact it is an essential tool !)
I had no luck though with changing the relevant property.

In the end I got around the problem by creating hover and link styles to the container div which isn't part of the navigational css that comes with cmsms.  I don't know how to style up the current page link - ie the 'menuactive' property with coloured text.  I can get it to change the background colour but not the text colour.

I found elsewhere in the forums people with same problems.  Might try and add an image to the current page instead, a subtle image to the left of the text perhaps.  Having a different background colour won't look good in this particular design otherwise I would just do that.

Thanks again
 

[RonnyK]

Do you use a default template, coming with the installation of CMSMS? If so, which one, that way I can see in my test-environment, what elements need to be styled to change the styling.

Can you post your "attached" menu-stylesheet, and mention the template used. I'll then put the menu-stylesheet to that template in my environment.

Ronny

[Darwin Web Design]

Thanks Ronny
The details are below, and I am incorporating this into my own fresh design using dreamweaver rather than 'restyling' a cmsms website design.

THE MENU CODE/TEMPLATE:

{menu template='cssmenu.tpl'}

THE RELEVANT CSS:

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  color: #666666;
}

(but it does not take on this colour)

THE HTML THAT IS GENERATED:



1: Home


  2: About Us


  3: Contact


       
 




I hope this provides enough info - sorry that it cannot be viewed online.

Regards

[RonnyK]

What if you check the calling of the menu and the default CSS belonging to "CSSmenu left + 1 column" and the CSS "Navigation: CSSMenu - Vertical", that calling works and styles the element.

I don't see what causes yours not to work, but the CSS mentioned is used to style the same TPL youm mentioned.

Ronny