I'm working on a responsive layout and it has two different menu layouts, standard and mobile. I can't seem to get the font color to change on the current page link in the main(2nd) navigation menu. I can set the back ground of the current/active page, and it works in both menus; however when I change the font/link color it only changes in the mobile menu. I have searched and can't seem to find the reason this happens or a solution. IDK if the issue is in the css or the header.
Thanks for looking,
Töm
CSS:
#home .home a:link, #home .home a:visited,#home .home a:hover, #home .home a:active, #contact .contact a:link, #contact .contact a:visited, #contact .contact a:hover, #contact .contact a:active, #photos .photos a:link, #photos .photos a:visited, #photos .photos a:hover, #photos .photos a:active, #services .services a:link, #services .services a:visited, #services .services a:hover, #services .services a:active{ <br> font-weight: bold; background-color: green; /*This changes the background link color to display the current page. Works in both menus. */ color: white; /* This changes the link font color of the current page in the menu. This only changes on the mobile menu. */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Links
Sorry the links got pulled. Here they are:
<a href="http://www.newmanlandscaping.com/index2.php" title="Actual Site"></a><br> <a href="http://www.newmanlandscaping.com/nlstyle.css" title="CSS"></a>
Hi Tommy, It's looks to be
Hi Tommy,
It's looks to be working for me, did you fix it?
It wasn't but is now. Someone
It wasn't but is now. Someone suggested: "
Use "!important" keyword so that it will not override with others.
#home .home a:link, #home .home a:visited, #home .home a:hover, #home .home a:active, #home .home .mainheader nav a:link, #home .home .mainheader nav a:visited, #home .home .mainheader nav a:hover, #home .home .mainheader nav a:active, #contact .contact a:link, #contact .contact a:visited, #contact .contact a:hover, #contact .contact a:active, #photos .photos a:link, #photos .photos a:visited, #photos .photos a:hover, #photos .photos a:active, #services .services a:link, #services .services a:visited, #services .services a:hover, #services .services a:active
{
font-weight: bold;
background-color: green; /*This changes the background link color to display the current page. Works in both menus. */
color: white !important; /* This changes the link font color of the current page in the menu. This only changes on the mobile menu. */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
And it seems to work perfectly. Now that the link isn't yellow, i can use the yellow background.
Thanks again for your time.
Töm