Looking for CSS to alter navigation font color/appearance

  • Author
    Posts
  • #877204

    zarajewelry
    Member

    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.

    #877330

    jackiedana
    Member

    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;
    }

    #877544

    zarajewelry
    Member

    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!
    ; )

    #877571

    jackiedana
    Member

    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.

    #877572

    jackiedana
    Member

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

    #menu a {
    font-weight: bold;
    }

    #877578

    zarajewelry
    Member

    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?

The topic ‘Looking for CSS to alter navigation font color/appearance’ is closed to new replies.