Styling the Main Navigation Menu

  • DP_Turtle

    #22223

    Nicely done, Josh. I’m a novice at CSS and am having trouble locating which setting(s) color the menu font color. Can you help me please with some guidance? Also, is it located in the style.css or style-light.css? Many thanks!

    Anonymous

    #22224

    Thanks Prasanna. (although I’m not sure what to make of the comment about making your eye tired). Should I change it? Yellow has always been my least favorite color… lol

    Hi Turtle,

    I’m not on my home computer right now. But the first thing I will suggest is for you to install both Mozilla Firefox, and the Firefox addon called Firebug. This addon will give you some powerful tools when it comes to css editing.

    You can view a quick tutorial I put together here, if you’re not already using it 🙂

    http://www.joshlobe.com/2011/10/using-mozilla-firebug-to-inspect-css-files/

    I’ll try to give some more specific instructions when I get back home.

    Anonymous

    #22225

    @ Turtle,

    Here is the css which controls the menu font color:

    #header-menu > li > a {
    color: #000000;
    }

    You may change the hex color to whatever you like.

    Here is the code which controls the menu font color during a hover state:

    #header-menu > li:hover > a, #header-menu > li.current-menu-item > a, #header-menu > li.current-menu-ancestor > a {
    color: #FFFFFF;
    }

    Again, change the hex color to whatever you like.

    DP_Turtle

    #22226

    Many, many thanks Josh for the direction, tips and tutorial!

Viewing 4 posts - 11 through 14 (of 14 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.