Title: PHP Code for “active” nav elements in header.php
Last modified: August 19, 2016

---

# PHP Code for “active” nav elements in header.php

 *  [brianfeister](https://wordpress.org/support/users/brianfeister/)
 * (@brianfeister)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/)
 * Ok,
 * So my plan is to have a navigation ul and I’ve got that worked out, what I don’t
   know how to do is to append the css style “.selected” to the
    -  element of the current page to make it display the “selected” css state.
    - Any help? I didn’t know which area of the forum to post since this is both
      php & css/xhtml
    - Thanks!
       Brian

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

 *  [bekabug](https://wordpress.org/support/users/bekabug/)
 * (@bekabug)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-950946)
 * nevermind. i misunderstood 🙂
 *  Thread Starter [brianfeister](https://wordpress.org/support/users/brianfeister/)
 * (@brianfeister)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951015)
 * does anyone out there know about this?
 *  [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * (@shaneholden)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951017)
 * If I’m following you correctly, here’s what mine looks like for a site I’m working
   on.
 * Menu:
 *     ```
       <div id="nav_outter">
       <div class="nav_inner">
       <ul>
             <li<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
             <?php wp_list_pages('title_li=&depth=1'); ?>
       </ul>
           <div style="clear:both;"></div>
       </div>
       </div>
       ```
   
 * CSS:
 *     ```
       #nav_outter {
       	width:870px;
       	background-color: #fff;
       	padding-right: 2%;
       	padding-left: 2%;
       	margin: 0 auto 0 auto;
       }
       .nav_inner {
       	background-image: url(imgs/menu_bg.png);
       	border-top: 1px solid #ccc;
       	border-bottom: 1px solid #ccc;
       	padding-top: 5px;
       	padding-bottom: 5px;
       }
       .nav_inner ul {
       	margin: 0;
       	padding: 0;
       	margin-left:5px;
       	list-style: none;
       }
       .nav_inner li {
       	float: left;
       	margin: 0;
       	padding: 0;
       }
       .nav_inner li a {
       	float: left;
       	margin: 0 1px 0 0;
       	font-size: 80%;
       	font-weight: normal;
       	text-decoration: none;
       	padding: 5px 15px;
       	color: #232323;
       }
       .nav_inner li a:hover {
       	color: #000;
       	background: #fff;
       }
       .nav_inner .current_page_item {
       	background-color: #d9d9d9;
       }
       ```
   
 * Is that what you’re looking for? 🙂
 *  Thread Starter [brianfeister](https://wordpress.org/support/users/brianfeister/)
 * (@brianfeister)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951021)
 * That helps alot, does “( is_home() )” target the current page regardless of where
   it is or just the page “home”?
 *  [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * (@shaneholden)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951023)
 * It’s just a link for the default home. If you’re using a different front page
   set in your reading settings, then you don’t need it at all. Regardless, the 
   one showing selected will work no matter which page is being viewed.
 *  Thread Starter [brianfeister](https://wordpress.org/support/users/brianfeister/)
 * (@brianfeister)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951025)
 * Right, right, but not quite what I’m getting at. I mean my nav is “home / blog/
   about / contact ” right? So I need my header.php to append the “active” class
   to “li.blog” if the visitor is at [http://myblog.com/blog](http://myblog.com/blog)…
   So it would read:
 * <li class=”home”>
    <li class=”blog active”> … …
 * the css looks like
 * .active {
    background-position: 0 -55px; }
 * This reveals the hidden image that is set to display on on :hover, or in this
   case “active”.
 *  [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * (@shaneholden)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951028)
 * Can you post the code that you have?
 *  Thread Starter [brianfeister](https://wordpress.org/support/users/brianfeister/)
 * (@brianfeister)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951029)
 *     ```
       <div id="nav_wrap">
               <div id="nav">
                   <ul>
                       <li class="drip home selected"><a class="static" href="/" title="main page">home</a></li>
                       <li class="drip blog"><a class="static" href="/blog" title="whimsical meanderings">blog</a></li>
                       <li class="drip contact"><a class="static" href="/contact" title="social interaction is the key">contact</a></li>
                       <li class="drip works"><a class="static" href="/works" title="dreamstar creations">works</a></li>
                       <li class="drip photo"><a class="static" href="/photo" title="some pictures">photo</a></li>
                       <li class="drip about"><a class="static" href="/about" title="what this company is all about">about</a></li>
                   </ul>
               </div>
           </div>
       ```
   
 *     ```
       #nav li.selected a, #nav ul li span.drip, #nav li.drip a:hover {
       	background-position: 0 -55px;
       	opacity: 1;
       	-moz-opacity: 1;
       	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
       	filter: alpha(opacity=100);
       }
       ```
   
 *  [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * (@shaneholden)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951034)
 * I’m using images for the menu on my site instead of text. But I didn’t use ul
   li, not sure why now that I think of it. Here’s the code that I’m using to show
   contact as circled when it’s active, and when mouseover it gets circled. When
   you’re on any other page it’s just the image that says ‘contact’. [http://www.shane-holden.com](http://www.shane-holden.com)
 *     ```
       <div id="image-menu">
       <?php if(is_page('contact')) { ?><a class="contact-active" href="/contact"><span>contact</span></a><?php } else { ?><a class="contact" href="/contact"><span>contact</span></a><?php } ?>
       </div>
       ```
   
 *     ```
       a.contact {
           display: inline-block;
           width:56px;
           height: 28px;
           background: url("images/menu_contact.gif") 0 0 no-repeat;
       }
       a.contact-active {
           display: inline-block;
           width: 56px;
           height: 28px;
           background: url("images/menu_contact.gif") 0 0 no-repeat;
           background-position: 0 -28px;
           border-bottom : 0px;
       }
       #image-menu {
           display: inline;
           width: 350px;
       }
       #image-menu a span {
           position: relative;
           color : #000000;
           margin-top:10px;
           display: block;
           z-index: -1;
       }
       a:hover.contact {
           background-position: 0 -28px;
           border-bottom : 0px;
       }
       ```
   
 * Sorry I’m not much more help, but I’m kind of multitasking at work and css takes
   me some time to get looking right.
 *  [hoss9009](https://wordpress.org/support/users/hoss9009/)
 * (@hoss9009)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951171)
 * [@brianfeister](https://wordpress.org/support/users/brianfeister/)
    I’m pickin’
   up what you’re layin’ down. I dunno how [@shaneholden](https://wordpress.org/support/users/shaneholden/)
   didn’t get it… lol. Any luck on figuring it out?
 *  [hoss9009](https://wordpress.org/support/users/hoss9009/)
 * (@hoss9009)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951172)
 * PS.
    I found this…. [http://codex.wordpress.org/Dynamic_Menu_Highlighting](http://codex.wordpress.org/Dynamic_Menu_Highlighting)
 *  [hoss9009](https://wordpress.org/support/users/hoss9009/)
 * (@hoss9009)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951173)
 * Also, [@shaneholden](https://wordpress.org/support/users/shaneholden/)….
    extend
   your bg img [http://yfrog.com/08capturenauj](http://yfrog.com/08capturenauj)
 *  [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * (@shaneholden)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951176)
 * [@hoss9009](https://wordpress.org/support/users/hoss9009/) Thanks for the headsup!
   🙂

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

The topic ‘PHP Code for “active” nav elements in header.php’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [li](https://wordpress.org/support/topic-tag/li/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * 13 replies
 * 4 participants
 * Last reply from: [shaneholden](https://wordpress.org/support/users/shaneholden/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/php-code-for-active-nav-elements-in-headerphp/#post-951176)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics