[Solved] CSS Nav Bar. Current page display.

[tommy5725]

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.

Here’s the page: http://www.newmanlandscaping.com/index2.php

Here’s the style sheet: http://www.newmanlandscaping.com/nlstyle.css

Thanks for looking,
Töm

#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;

[shaneisme]

Your stylesheets are difficult to troubleshoot because you’re suffering from an over-specificity issue.

It’s widely accepted to not use id for styling as it limits you greatly and causes repetitions like you posted above.

You can replace all of that with a simple class, and you won’t be battling specificity from other places.

Harry says it better than I:

http://csswizardry.com/2012/05/keep-your-css-selectors-short/

[tommy5725]

I will try to condense things. I think i’ve just kept trying to specify more and more in an effort to fix the issue. Seems i’ve spent the better part of 4 days trying to change the color of “a” word. (lol)

Everything works until i add the additional mobile menu to the header.html file. I got some good help with the original layout from wolfcry911. However if i end up with more than 4 pages, i was thinking a retractable mobile nav button would be better use of screen real-estate.

There is a body ID for each page (#home, #photos, etc) this is used to show the curent page in the nav bar. I didn’t/don’t know a better way.

Thanks for the link and the feedback though, good information.

Töm

[shaneisme]

You could use JS instead of doing that perhaps. You could detect your current URL and then just do a little if/else to add an active class to the appropriate link.

[tommy5725]

Many thanks to all of you for your information. IDK if this is a proper fix, but it was suggested to add “!important after the color command. So:

#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; /<em>This changes the background link color to display the current page. Works in both menus. */
color: white !important;      /</em> 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 now everything seems to be functioning. I’ll keep you posted.

Thanks one and all for your time and effort, your true life savers.

Töm

[Author]

Posts