Title: Theme Help: Navigation Question
Last modified: August 18, 2016

---

# Theme Help: Navigation Question

 *  [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/)
 * Can anyone figure this out?
 * I want to make the navigation so that when user is on a page like about that 
   the the navigation has class=”selected” for the about page.
 * The thing is, there is no way to know what pages people are going to have, so
   it has to be dynamically created through the wp_list_pages if possible.

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

 *  [moshu](https://wordpress.org/support/users/moshu/)
 * (@moshu)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299766)
 * Why nobody i ever considering browsing the Codex? 🙂
    [Dynamic_Menu_Highlighting](http://codex.wordpress.org/Dynamic_Menu_Highlighting)
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299767)
 * That does not help. I don’t know what the pages will be, so a conditional statement
   like that will not work without knowing the pages names.
 *  [moshu](https://wordpress.org/support/users/moshu/)
 * (@moshu)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299768)
 * It is also possible to use the built-in feature of WP: when listing the [Pages](http://codex.wordpress.org/Pages)
   when you are on a certain Page it adds an additional class to the current Page
   item. You just have to add that class to your stylesheet.
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299769)
 * That won’t work right for me. I need the additional class on the anchor not the
   list item. :$
 * You are full of great ideas, but none of them solve my current issue. lol… Any
   more?
 *  [moshu](https://wordpress.org/support/users/moshu/)
 * (@moshu)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299770)
 * I know I did it for a client.
    From the Codex: _All list items (`<li>`) generated
   by this tag will be given the CSS class “page\_item”. When wp\_list\_pages is
   called while displaying a Page, the list item for that Page will be given the
   additional CSS class “current\_page\_item”.
 * Defining the different style for the current_page_item in the stylesheet will
   result in having that Page name visually different in the menu/pagelist… whatever.
   
   Isn’t it what you want?
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299771)
 * Yes, but I need it to be on the anchor (a href) instead of the list item (li)
   for it to override the styling on the normal anchor for that link.
 * #menu a
    {display:block; width:202px; padding:5px 18px 5px 0; color:#606060; 
   background: url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-
   weight:normal; text-decoration:none; letter-spacing:-2px;}
 * #menu a:hover
    {color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top 
   right repeat-y;}
 * #menu ul li.current_page_item:hover
    {color:#505050; background:#fafafa;}
 * #menu ul li.current_page_item
    {padding:5px 18px 5px 0; background:#fafafa; border-
   top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}
 * This is what I have currently, and as well as it works, it does not solve my 
   last problem. A current page item should not have the image in the background
   while the rest of the links should.
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299772)
 * I would change them all to ul li instead of a, but in IE and some other browsers
   you can’t have anything else have a hover effect other than normal links (a href).
   So my li hover won’t work on such browsers.
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299776)
 * I got it… 🙂
 *  [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * (@vkaryl)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299778)
 * Great! Please post what you did so the next poor soul with the same problem can
   find it….
 *  Thread Starter [phoenixd](https://wordpress.org/support/users/phoenixd/)
 * (@phoenixd)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299783)
 * I changed everything to use the li rather than the a href.
 * #menu a
    {display:block; width:202px; padding:5px 18px 5px 0; color:#606060; 
   font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}
 * #menu a:hover
    {color:#303030; background:#f0f0f0}
 * #menu ul li.current_page_item:hover
    {margin: 0; color:#505050; background:#fafafa;}
 * #menu ul li.current_page_item
    {margin: 0; background:#fafafa; border-top:2px
   solid #c0c0c0; border-bottom:2px solid #c0c0c0;}
 * #menu ul {
    margin: 0; padding: 0; list-style: none; }
 * #menu ul li {
    margin: 0; padding: 0; list-style: none; background: url(img/sidebarbg.
   gif) top right repeat-y; }
 * Here is the code for my menu, and you will see it a lot more when I release the
   theme with it. 🙂 Thanks moshu for the help.
 *  [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * (@vkaryl)
 * [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299784)
 * Thanks much. It’s always helpful to have the solution to the original problem….

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

The topic ‘Theme Help: Navigation Question’ is closed to new replies.

## Tags

 * [wp_list_pages](https://wordpress.org/support/topic-tag/wp_list_pages/)

 * 11 replies
 * 3 participants
 * Last reply from: [vkaryl](https://wordpress.org/support/users/vkaryl/)
 * Last activity: [20 years, 3 months ago](https://wordpress.org/support/topic/theme-help-navigation-question/#post-299784)
 * Status: not a support question

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics