Active Nav Button Help

Are you talking about something like this? can you clarify?

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.

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 to head off any problems with your styles carrying over into subsequent ul/li elements.

Hmmm, it doesn’t seem to work.

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.

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 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!

Alright that looks like the right codex I should be reading. Thanks everyone for your help.

Nvm, got it =] Thanks!