How to Highlight the Current Page when Using WordPress Navigation Menus

How to Highlight the Current Page when Using WordPress Navigation Menus

WordPress 3.0 brought us a shiny new navigation system with drag and drop style custom menus. This added theme feature has been quietly making everyone’s lives much easier.

Today we’re going to walk through a basic styling tip for highlighting the current page. This is a helpful little CSS tweak that makes your website easier to navigate.

If your theme supports WordPress menus, then you already have a built-in class to make it super easy to highlight the current page being viewed. If you’re using an older theme that does not offer support for WordPress menus, then you can easily add it in yourself by following the tutorial in the codex.

By default, WordPress menus output this class with the list item: current-menu-item

You can choose to target either the list item or the link itself. This example specifies the background color and font color for the current list item:

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

{code type=css}
li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

So simple, right? Here’s how you might target the link itself:

{code type=css}
li.current-menu-item a {
text-decoration: underline;
background:#ccc;
}

You can add colors, backgrounds, text shadows, background images, or anything you like to highlight the current page.

If your theme supports the creation of multiple navigation menus, then you’ll need to be a bit more specific in your CSS if you want to have them styled differently.

You can use Firebug to find the unique ID of your unordered list. It will contain the name you gave to your menu.

If you have other menus with different styles on the page, then you’ll need to differentiate them in your CSS:

{code type=css}
#menu-main-pages li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

With those simple snippets you should have the basics for highlighting current menu items.

Have fun styling your custom menus and let us know if there are any more CSS tutorials you’d be interested to see on wpmu.org.

Have any handy CSS hacks of your own? Share in the comments below!

Tags:

Sarah Gooding Sarah is a designer and developer who specializes in WordPress. She and her husband operate Untame, where they build business websites, online stores, and social networks using open-source technologies. She is a former author for WPMU DEV on all things WordPress, Multisite, and BuddyPress.