How to Highlight the Current Page

September 18, 2007

I was asked if there was a way to highlight the current page of the theme – something that I overlooked when creating the theme, and also something very easy to include.

What you need to do is open up your style.css file, and add this code to the area that defines the #navbar:

.current_page_item a, .current_page_item a:hover {
background: #FFFFFF !important;
color: #2255AA !important;
}

One thing to keep in mind, is that this only works for pages that are shown in the navbar dynamically, so if you hardcode your navbar, this styling element will not work. The code above will display your active page the way you see it below:

How to Highlight the Current Page

Since the code for highlighting the current page is through css, you have the ability to change the text/background colors to suit your overall design needs.

Comments

Got something to say?