Hover Color

  • Author
  • #669666

    How do you change the color of a menu item when you hover over the item?

    The blog I need help with is modernmrscleaver.com.


    Are you talking about this site, http://modernmrscleaver.com/ ? And are you talking about the text color when hovering or the background color, which is currently black?


    That is correct…I would like to change the color from black to something else.


    The first below will take care of the main tabs when you hover. The second is for the submenu items if you happen to create dropdown menus at some point. Just change the hex color code to your desired color.

    #nav .current_page_item a, #nav li:hover > a, #nav ul ul:hover > a {
    background: none repeat scroll 0 0 #222222;
    #nav ul ul a:hover {
    background: none repeat scroll 0 0 #000000;

    To change the top navigation background and text color in the Pilcrow theme, try adding this to your Appearance → Custom Design → CSS page:

    #nav ul ul a {
    	background: #9A4B4E;
    	color: #fff;
    #nav .current_page_item a, #nav li:hover > a, #nav ul ul :hover > a {
    	background: #9A4B4E;
    	color: #fff;
    #nav ul ul a:hover {
    	background: #8B4346;

    I figured out what CSS block to add by looking at the Pilcrow stylesheet, searching for the CSS related to the navigation menu (#nav in this case), and just copying over the #nav elements with anything color related in them (background and color) and replacing the colors with ones that looked close to your header image.


    @thesacredpath, I must have been replying at the same time as you. :)

    Oh, and for color picking, I used the ColorZilla Firefox extension. I’d be interested to know what other color pickers are everyone’s favorites.


    Yup, we be answering in stereo. :-)

    I use colorzilla too, but I also have ColorSchemer Studio 2 installed on my computer and use that quite a bit as well.

The topic ‘Hover Color’ is closed to new replies.