• Locked
3 replies [Last post]
Wed, 2014-08-06 23:20
tommy5725
tommy5725's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2014-08-03
Posts: 3
Points: 5

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.

Here's the page:

Here's the style sheet:

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;

Top
Tags:
Wed, 2014-08-06 23:26
#1
tommy5725
tommy5725's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2014-08-03
Posts: 3
Points: 5

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>

Top
Thu, 2014-08-07 19:06
#2
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Tommy, It's looks to be

Hi Tommy,
It's looks to be working for me, did you fix it?

Top
Fri, 2014-08-08 06:08
#3
tommy5725
tommy5725's picture
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-4
Joined: 2014-08-03
Posts: 3
Points: 5

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

Top
  • Locked