ThemeShaper Forums » Thematic


Adding Active Highlight to Pages on Menu

(6 posts)
  • Started 11 years ago by mlou
  • Latest reply from yahyaayob
  • This topic is resolved
  1. mlou

    On my horizontal menu bar, I would like to add an active state where the page name is highlighted in the menu based on whatever page the user is currently on.

    For example, if the user was on the ABOUT US page, then ABOUT US would be highlighted a different color. How do I do that?

    Posted 11 years ago #
  2. in your child theme's style.css add the line:

    .current_page_item { background: red }

    Posted 11 years ago #
  3. mlou

    Thanks, I got it to work by using:

    .sf-menu .current_page_item a {background: red}

    Posted 11 years ago #
  4. hlynnt

    This isn't working for me :(

    I want to change the color of the text of the current page in the navigation. How should I do this?

    Posted 11 years ago #
  5. hlynnt- Specificity gets really confusing sometimes. It's strange with your css the .sf-menu .current_page_item a is color: white in Safari but for some reason Firefox is seeing the pseudo element .sf-menu a:visited as being more specific than .sf-menu .current_page_item a

    ...well anyway try adding .sf-menu .current_page_item a:visited like so:

    .sf-menu .current_page_item a, .sf-menu .current_page_item a:visited, .sf-menu .current_page_ancestor a, .sf-menu .current_page_parent a {
    Posted 11 years ago #
  6. yahyaayob

    Thanks bro! Learning from your concept, I manage to get the page_item font color to all universal white.

    But I am still figuring out how to rid of the gray borders? I need help.

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.