I have a simple Wayfinder call for a single line menu. [[Wayfinder? &startId=`0` &level=`1` &hereClass=`active`]] The menu is controlled by the Style sheet:
The code for the page is:
<body id="page1">
<div class="main">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="wrapper p3">
<div class="grid_12">
<div class="wrapper border-bot">
<h1><a href="#"><img src="assets/templates/mytemplates/octagon/images/OctagonBanner.png" alt=""></a></h1>
<!--============================Menu==================================-->
<nav>
<ul class="menu">
[[Wayfinder? &startId=`0` &level=`1` &hereClass=`active`]]
</ul></nav>
</div>
The CSS is:
/***** menu *****/
.menu {
padding:51px 0 0 0;
float:right;
}
.menu li {
float:left;
position:relative;
padding-left:12px;
}
.menu > li:first-child {padding-left:0;}
.menu a {
display:inline-block;
font-size:13px;
line-height:20px;
padding:3px 20px;
color:#999;
}
.menu a.active,
.menu a:hover {background:#dc5130; color:#fff;}
The menu is displaying properly on the page and the hover effects are working fine. The problem is that the background color should display solid on the current page. I cannot get .menu a.active to display over the menu item for the current page.
Thanks for any help.
