Need help? Check out our Support site, then


How do i change the color of the top links?

  1. My blog is AskHomesale.com ( http://pruhomesale.wordpress.com/ ) and i would like to change the top page links. Maybe solid black with white text?

    The blog I need help with is askhomesale.com.

  2. The background color, if that is what you are wanting to change, is a 16px x 22px image that repeats in the "x" direction (horizontally). You can create a new image of the same size, upload it to your media library, get the URL and replace URL OF IMAGE between the double quote marks in the below.

    #navigation ul li {
    background: url("URL OF IMAGE") repeat-x scroll 0 0 #FFFFFF;
    }

    The existing image: http://s2.wp.com/wp-content/themes/pub/under-the-influence/images/top_gradient.png

    Or if you want a solid color, add this to your CSS instead and edit the color code.

    #navigation ul li {
    background: #FFFFFF;
    }
  3. i tried the solid color code and previewed it, nothing changed?

  4. got them to turn solid black with this code but would like the white text to stand out more, suggestions?

    #navigation ul li {
    background: black;
    font-color: white;
    font-weight: bold;
    font-size: 14px;
    }

  5. In your code example, it should be "color" instead of "font-color".

  6. tried this and it didn't change navigation colors:

    #navigation ul li {
    background: black;
    color: white;
    font-weight: bold;
    }

  7. Looking a little closer, the colors in the menu in the Under the Influence theme are set through the navigation list items and anchor tags. Here are some more specific examples.

    This will change the color of the links in the menu in general:

    #navigation ul li a, .navigation, .navigation a {
        color: #fff;
    }

    This will change the color of the links when you hover over them:

    #navigation ul li.current_page_item a, #navigation ul li a:hover, #navigation ul li a:focus {
        color: #333;
    }

    This changes the color of the links for the current page and the top menu item when you're hovering over submenu items:

    #navigation li:hover > a, #navigation ul ul:hover > a, #navigation ul li.current_page_item > a, #navigation ul li.current-menu-ancestor > a, #navigation ul li.current-menu-item > a, #navigation ul li.current-menu-parent > a {
        color: #333;
    }
  8. Note, you also need to keep this for the main color change. It updates the background link but doesn't change any of the link colors:

    #navigation ul li {
        background: black;
        font-weight: bold;
        font-size: 14px;
    }
  9. thank you, you are awesome!

  10. You are too! :)

Topic Closed

This topic has been closed to new replies.

About this Topic