Support » Fixing WordPress » Dynamic menu highlighting not working

  • Resolved david.danaan

    (@daviddanaan)


    I’m just trying to get dynamic menu highlighting to work, using the instructions in the codex – nothing fancy or weird – but it doesn’t work. It will probably be obvious to someone else, but I don’t see what I’m doing wrong. Here is the php in the header:

    <li<?php
                    if (is_page('2'))
                    {
                    echo " id=\"current\"";
                    }?>>
                    <a href="<?php bloginfo('url') ?>/?page_id=2">About us</a>
            </li>

    and here is the id defined in the css:

    #current a {
    	        color: #fff;
    	        background-color: #999;
    	    }

    Am I missing something? Thank you for any help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • I would do it like this:

    <?php if(is_page(2) ) { ?>
      <?php $liclass = "current"; ?>
    <?php } else { ?>
      <?php $liclass = "normal"; ?>
    <?php } ?>
    <li id="<?php echo $liclass; ?>"<a href="<?php bloginfo('url') ?>/?page_id=2">About us</a></li>
    Michael

    (@alchymyth)

    Forum Moderator

    looks ok
    – just be aware that sometimes you need to reload the page in the brower, or press ‘ctrl f5’ to clear the browser cache.

    the condition if (is_page('2')) might also not work as expected.

    did you check the html in the browser to see if the css id is getting added to the list item?

    firefox with the web developer add-on is a good tool to help with css/html debugging.

    with a link to your site with the problem showing, you might get more help.

    That looks like it should work, but doesn’t either. I’ve tried defining “current” both as an id and as a class, like this:

    ul#nav_main li .current: {
    		        color: #fff;
    				background-color: #999;
                              }

    and using this in the header:

    <li<?php
                    if (is_page('2'))
                    {
                    echo " class=\"current\"";
                    }?>>
                    <a href="<?php bloginfo('url') ?>/?page_id=2">About us</a>
            </li>

    and this:

    <li <?php
                    if(is_page(2))
                    {?>
                    class="current"<?php }?>>
                    <a href="<?php bloginfo('url'); ?>/?page_id=2"><?php _e('About us'); ?></a>
                    </li>

    alchymyth, yes the source code shows this:

    <li id="current">
                    <a href="http://localhost/chhc/?page_id=2">About us</a>
            </li>

    It’s a site under development on my localhost.

    Since it seems to be generating the right html, the problem must be in the css, right?

    Michael

    (@alchymyth)

    Forum Moderator

    there is always a way to force the style:

    #current a {
    	        color: #fff!important;
    	        background-color: #999!important;
    	    }

    although it would be better to find the style that is overpowering your style…

    or

    li#current a {
    	        color: #fff;
    	        background-color: #999;
    	    }

    I admit to being just flummoxed by this. It’s clearly the css, I even added a dummy link before the php with the class. The html when on the About page:

    <ul id="nav_main">
            <li class="current"><a href="#">Test</a></li>
    <!-- To show "current" on the home page -->
            <li>
                    <a href="http://localhost/chhc">Home</a>
            </li>        
    
    <!-- To show "current" on the About Page -->
            <li class="current">
                    <a href="http://localhost/chhc/?page_id=2">About us</a>
            </li>
            </ul>

    The php (calls class, not id) works fine, but the browser ignores the class “current” even with the !important added. Here’s the css for the whole navigation id. Is there something wrong with this?

    /* begin nav_main */
    
    		ul#nav_main {
    		    background-color: #999;
    			/* background: url(images/back/bg_nav2.jpg) no-repeat top center; */
    			width: 843px;
    			position: absolute;
    			bottom: 0;
    			left: 0;
    			height: 32px;
    			float: left;
    			padding-left: 4px;
    			overflow: visible;
    		  }
    
    		ul#nav_main li a {
    			float: left;
    			text-align: center;
    			background-color: #626262;
    			/* background: url(images/back/bg_nav_item.gif) no-repeat right center; */
    			padding: 0 15px 0 15px;
    			height: 31px;
    			border-right: 2px groove #f9f9f9;
    			overflow: visible;
    		    }
    
    		ul#nav_main li a .current {
    		        color: #fff!important;
    				background-color: #999!important;
    			} 			
    
    		ul#nav_main li a:hover {
    		        color: #fff;
    				background-color: #999;
    			}			
    
    			/* end nav_main */

    alchymyth, just fixed it with your help. My css syntax was wrong. I thought I had tried everything, but ul#nav_main li.current a worked.

    Thank you for being so patient with my learning curve.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Dynamic menu highlighting not working’ is closed to new replies.