Title: Active Nav Button Help
Last modified: August 20, 2016

---

# Active Nav Button Help

 *  [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * (@teckn1cality)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/)
 * How do I make a button active in the navbar when viewing it?
 * Any help is appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [pearluvsapple](https://wordpress.org/support/users/pearluvsapple/)
 * (@pearluvsapple)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766360)
 * Are you talking about something like [this?](http://http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/)
   can you clarify?
 *  Thread Starter [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * (@teckn1cality)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766362)
 * I’m trying to make it so when I’m viewing a page that’s in the navbar, the button
   is styled differently so I know I’m viewing that page.
 *  [pearluvsapple](https://wordpress.org/support/users/pearluvsapple/)
 * (@pearluvsapple)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766403)
 * Ah, you want the CSS selector ‘active’.
 * On your CSS stylesheet you have the lines that govern the element such as .nav
   or #navbar li, something like that. You want to add a few lines of code to handle
   the separate treatment of the active element.
 * For a nav bar with the div class ‘menu’ you would have something like
    .menu 
   li { some css goes here } and you would want to add another line such that .menu
   li:active { has some different styling }
 * If you have a parent/child relationship between your navigation elements you 
   might want to take a look at [this thread](http://www.designerstalk.com/forums/help-me/33576-problems-using-li-class-active.html)
   to head off any problems with your styles carrying over into subsequent ul/li
   elements.
 *  Thread Starter [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * (@teckn1cality)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766420)
 * Hmmm, it doesn’t seem to work.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766423)
 * I think what you want is CSS code that only applies when you are on a certain
   page — so you’d need to use the page-ID or some other page-specific tag in the
   CSS code. I’ve done it with static sites by assigning an ID to the body tag for
   each page (that’s in the menu) and then adding CSS code using that ID as one 
   of the selectors. You’d have a separate CSS code block for each page — the ID
   would change in each, but the styles would be the same.
 * Not sure how you would do this in WP — but maybe page-ID’s would work to select
   the various menu items.
 * Hope this makes sense.
 *  [pearluvsapple](https://wordpress.org/support/users/pearluvsapple/)
 * (@pearluvsapple)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766425)
 * Okay my bad, I thought you were looking for a mouseover effect not a ‘what page
   am I on’ effect. I didn’t read your post closely enough, take a look at [this](http://codex.wordpress.org/Dynamic_Menu_Highlighting)
   and it will walk you through doing what you’re trying to do with your navigation.
 * As Yogi pointed out you need to apply a class on the current page and then let
   the css dictate how that page appears as the class is assigned. I would go with‘
   Method 2’ personally as it seems much cleaner in the end. Goodluck!
 *  Thread Starter [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * (@teckn1cality)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766426)
 * Alright that looks like the right codex I should be reading. Thanks everyone 
   for your help.
 *  Thread Starter [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * (@teckn1cality)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766429)
 * Nvm, got it =] Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Active Nav Button Help’ is closed to new replies.

 * 8 replies
 * 3 participants
 * Last reply from: [teckn1caLity](https://wordpress.org/support/users/teckn1cality/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/active-nav-button-help/#post-2766429)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics