WordPress.com

1. zarajewelry
   Member
   Apr 26, 2012, 5:49 PM

   Hi folks!

   WordPress newb here with another CSS question: I'd like to alter the appearance of the navigation bar at the top of my page - specifically I want to darken the text color to a darker gray to make it stand out more. Currently, unless it's highlighted or you scroll over it, it's quite faint.

   Here's my blog:
   http://zarajewelry.wordpress.com/

   Anyone know the name/title of class for navigation so that I can use CSS to change that color? If you have the CSS itself, that would also be super cool.

   Thank you!
   : )

   The blog I need help with is zarajewelry.wordpress.com.

2. jackiedana
   Happiness Engineer
   Apr 26, 2012, 6:30 PM

   First of all, your site looks really nice! I do agree, making the navigation darker would be a good idea. Keep in mind, though, that if you make it much darker it won't be differentiated to the viewer from the 'hover' state, so if you change the link color you might want to lighten the hover color. In fact, reversing them might even work.

   If you have the custom design upgrade, these are the two selectors you might modify:

   #menu a {
   color: #999999;
   }

   and

   #menu a:hover {
   color: #000000;
   }

3. zarajewelry
   Member
   Apr 27, 2012, 12:37 PM

   Thank you for the kind words - and the awesome help! This worked great! One more question, if it's not too annoying: how would I change the above CSS to code for bold text?

   Thank you again!
   ; )

4. jackiedana
   Happiness Engineer
   Apr 27, 2012, 6:30 PM

   No problem!

   You'd want to use the font-weight property.

   #menu a, {
   font-weight: bold;
   }

   You can also give it a specific weight, as explained at this site:
   http://www.w3schools.com/cssref/pr_font_weight.asp

   I bring up the variations explained above because you might want to play around with just how bold you make the text.

5. jackiedana
   Happiness Engineer
   Apr 27, 2012, 6:31 PM

   Sorry, no comma after the a. So it would just be

   #menu a {
   font-weight: bold;
   }

6. zarajewelry
   Member
   Apr 27, 2012, 7:12 PM

   That is great! Thank you so much for your help. I continue to be amazed at how helpful and patient people are here!
   : )
   P.S. I totally need to learn basic CSS. Any sites/links you would suggest?

Topic Closed

This topic has been closed to new replies.