Changing the colour of some links – but not others

  • Unknown's avatar
    melindabridges · Member ·

    Hi everyone,

    In the orange menu bar underneath my header image are links to 3 pages – Home, About Us and Websites we love. Because I have selected orange in the CSS specifically for my links, the About Us and Websites we love is not visible because it’s the same orange as the menu bar.

    I want to keep the orange colour for active links in my posts (for overall design consistency) but I need a way to make the menu bar links stand out in a different colour. Is there any way to change the colour of some links but not others?

    Here is the code I am using for my links at the moment:

    /* unvisited link */
    a:link {color: #ff8f0b;}

    /* visited link */
    a:visited {color: #ff8f0b;}

    /* mouse over link */
    a:hover {color: #7dd2bb;}

    /* selected link */
    a:active {color: #0000FF;}

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    sandymcfadden · Member ·

    Hi Melinda,

    If you add this to your css as well, changing the colors to what ever you like, it will only change the links in the menu bar.

    /* unvisited link */
#site-navigation a:link {color: #000000;}

/* visited link */
#site-navigation a:visited {color: #000000;}

/* mouse over link */
#site-navigation a:hover {color: #000000;}

/* selected link */
#site-navigation a:active {color: #000000;}

    So if you leave the code you have to change the other links to those colors and add the code above, you should be able to do what you are looking for.

    Let me know if that works for you.

  • Unknown's avatar
    melindabridges · Member ·

    Amazeballs! Thank you so much :)

  • The topic ‘Changing the colour of some links – but not others’ is closed to new replies.