Highlight the Current Page in a Spry Menu with CSS

by James Cook on January 9, 2011

duration: 7:38

How to use CSS to highlight the link to the current page in your menus (including Spry menubars). As an example, the "Home" link will be highlighted on the Home page, the "Contact" link on the contact page, etc.


Dave S July 15, 2013 at 5:06 pm

Hi there,

I’ve been battling away trying to get a Spry 2.0 (or Spry-UI-1.7) to work as required. I have the basic menu functioning and tested on touchscreen devices OK.

I’m now trying to change the text colour of the current page to indicate that is the page being visited. I have followed your steps, and several other suggestions on Adobe Forums etc but I get the feeling they’re for an earlier version of Spry. I can’t seem to track down the “ul.MenuBarHorizontal a” CSS code either, so not sure what equivalent CSS needs changing for Spry 2.0.

Any thoughts would be greatly appreciated.


miao June 8, 2013 at 2:43 pm

Thank you very much!
This is the best solution I’ve found.

Yoli June 20, 2011 at 1:04 pm

This hack works perfectly in IE, FF and Crome but not in Safari =,(
…any other idea what to do with Safari????

jcook June 20, 2011 at 1:33 pm

It should work in Safari as well. Can you post a page where it’s not working and give me a link to check out?

michael January 10, 2011 at 8:42 am

I dont have a webpage yet but I am working on one. Basically learning all by myself and need all the help I can get.. thanks.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact