Highlight Links to the Current Page

• 

  virwinia · Member · Apr 23, 2016 at 1:29 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I the bar menu (Home, About, Contact), I would like to highlight the page the user is currently on.

  For example, if all the texts are blue, while the user is reading Home, I would like to remain highlighted the word Home in red.

  Currently I have a code to change color when the mouse is over a link, but I would like to remain that color when someone click on that link. But the change should not be permanent (like it happens when you use a:visited {} ). They should work only while the user is on the page.

  This is my code:

  .main-navigation a {
  padding: .75em 0;
  text-decoration: none;
  color: #4f4f4f;
  }

  /* Mouse over the link */
  a:hover{
  color: #F0F0F0;
  }

  I have tried to use a:active{} but doesn’t work.

  My theme is Intergalactic and my site is http://www.virwinia.com

  Hope someone could help n__n Thanks

• 

  michaelvandenberg · Member · Apr 24, 2016 at 9:22 am

  • Copy link

  Something like this should do the trick:

  .current-menu-item a {
  	color: red;
  }
  
  .current-menu-item a:hover,
  .current-menu-item a:focus {
  	color: blue;
  }

• 

  michaelvandenberg · Member · Apr 24, 2016 at 9:24 am

  • Copy link

  There doesn’t seem to be a current-menu-item class for the home page. If you want to style that as well use this instead:

  .current-menu-item a,
  .home .menu-item-607 a {
  	color: red;
  }
  
  .current-menu-item a:hover,
  .current-menu-item a:focus,
  .home .menu-item-607 a:hover,
  .home .menu-item-607 a:focus {
  	color: blue;
  }

  Let me know if this helps! :)

• 

  virwinia · Member · Apr 24, 2016 at 11:20 pm

  • Copy link

  Thank you so much Michael, it works perfectly! n___n

  :D