Highlight the Active Page in Header Menu
-
Currently when the HOME [ get_option(‘home’) or bloginfo(‘url’)], page is ‘active’ the background color (#5c75aa) REMAINS illuminated.
This is not true for other Header Menu items [ <?php $pages = wp_list_pages()]. None of the active <?php $pages = wp_list_pages() pages keeps background color when it or its children are ‘active’.
I WANT THEM ALL TO BEHAVE THE SAME as HOME. (Meaning that the Active Menu item Background Color is Displayed on top Header Menu for Pages and CHILDREN; top level).
Current Header.php
<!– start header –>
<div class=”header”>
<div id=”header-TXT”>
<h1>/”><?php bloginfo(‘name’); ?></h1>
</div><div class=”TB”>
- ” href=”<?php echo get_option(‘home’); ?>/”><span>Home</span>
<?php $pages = wp_list_pages(‘sort_column=menu_order&title_li=&echo=0’);
$pages = preg_replace(‘%]+)>%U’,’<span>’, $pages);
$pages = str_replace(‘‘,'</span>’, $pages);
echo $pages; ?><? unset($pages); ?>
</div>Current StyleSheet.php
/* header */
/**/ * html .header { height: 80px; } /* */
.header { width:950px; height: 2.7em; background:#3b5998; border-bottom:6px solid #95a7ce; clear: left; padding: 0 0px 0 30px; margin:0 0 1.2em 0; }
.header #header-TXT { float:left; padding: 0 0px .3em 0px; margin: .5em 0 .5em 0px; }
.header h1 { font:bold 19px Arial, Georgia; letter-spacing: normal; padding: 0px; margin: 0px; font-weight: bold; }
.header h1 a { color:#fff; text-decoration: none; }
.header h1 a:hover { color:#f5f5f5; text-decoration: none; }
.header-desc { display:block; border:1px solid #e2eaf5; color:#000; font-size: 14px; line-height: 15px; font:normal 8pt Tahoma; padding: 1em; margin: 1em 3em 1em 3em;}/* TB a toolbox */
.TB { padding: 0 0px 0 2em; float: left; width: 35em; }
.TB em { display: none; }
.TB ul { list-style: none; margin: 0px; padding: 0px;}
.TB ul li ul { display: none;}
.TB li { padding: 0px; margin: 0px; display: inline; font-size: 10px; line-height: 11px; font-weight: bold;}
.TB a { font: bold 1.1em Tahoma; padding: .5em 0px .4em 3px; margin-right: 2px; float: left;}
.TB a span { padding: 4px 9px 5px 6px; display: block; float: right; }
.TB a span { float: none; color: #fff;}
.TB a:hover span { color: #fff;}
.TB a:hover { background: #5c75aa; color:#fff; text-decoration: none;}
.TB a:hover span { background: #5c75aa; color:#fff;}
.TB .active { background: #5c75aa; color:#fff; }
.TB .active span { background: #5c75aa; color:#fff; }
- The topic ‘Highlight the Active Page in Header Menu’ is closed to new replies.