• Hi there,

    I have a menu on this page.

    Is there an easy way to highlight the tab rather than add a new class to the page and menu id in the css file every time?

    At the moment i’m doing:

    body.page-id-37 ul#menu-main li#menu-item-166 a,
    body.page-id-37 ul#menu-main li#menu-item-166 a:visited,
    body.page-id-37 ul#menu-main li#menu-item-166 a:hover { height: 37px; background: url(../images/nav_left_hover.gif) no-repeat 0; color:#fff; }

    There must be an easier way of doing this?

    See this page for what Im trying to do – http://testbed.callendercreates.com/chase/

    and this one – http://testbed.callendercreates.com/chase/services/customer-aquisition/

    Thanks for any help.

    Jim C.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter callender

    (@jimcallender)

    any ideas?

    It’s been so long, I forget how I set this up…. I’ll drop the code I use to highlight current page in my nav menu, see if it helps….

    IN my header.php (where my menu is) I use this for my menu:

    <div id="mymenucontainer">
      <div id="mymenu">
        <ul>
          <?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
          <li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>">Home</a></li>
          <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
        </ul>
      </div>
    </div>

    so that part of the code sets up my menu, which you would adjust the wp_list_pages part to suit your needs…but it adds a class of current_page_item to the active tab in the menu

    #mymenucontainer{
    	height:30px;
    	background:#300707;
    	display:block;
    	padding:0px 0 0px 0px;
    	border-top:1px solid #6b0404;
    	}
    #mymenu{
    	position:relative;
    	display:block;
    	height:30px;
    	font-size:13px;
    	font-weight:normal;
    	font-family:Verdana,Tahoma,Helvitica,sans-serif;
    	}
    #mymenu ul{
    	margin:0px;
    	padding:0px 0px 0 10px;
    	list-style-type:none;
    	width:auto;
    	float:left;
    	}
    #mymenu ul li{
    	display:block;
    	float:left;
    	margin:0 10px 0 10px;
    	}
    #mymenu ul li a{
    	display:block;
    	float:left;
    	color:#cc99aa;
    	text-align: center;
    	text-decoration:none;
    	padding:7px 0px 0 0px;
    	height: 23px;
    	}
    #mymenu ul li a:hover,#mymenu ul li.current_page_item a{
    	color:#d1cbc6;
    	height: 23px;
    	text-align: center;
    	text-decoration:underline;
    	}
    #mymenu ul li .current_page_item a,#mymenu ul li .current_page_item a:hover{
    	color:#020202;
    	width: 106px; height: 23px;
    	}

    obviously you don’t need all my styling, I’m too lazy to truncate. But the last 2 css entries handle the current_page_item link/hover, etc…. which is the active tab

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

The topic ‘Highlight menu tab’ is closed to new replies.