Spry Menu Bar 2.0 overrides persistent page indicator text color?

For persistent highlighting, you'll need to be more specific with your CSS selector names.  See changes in green.

body.home #MenuBar a.home,

body.fragrances #MenuBar a.fragrances,

body.oils #MenuBar a.oils,

body.leather #MenuBar a.leather,

body.deodorants #MenuBar a.deodorants,

body.technical #MenuBar a.technical,

body.shipping #MenuBar a.shipping {

    background-image:url("images/ArrowMenuRightHov.gif");

     background-position:right center;

     background-repeat:no-repeat;

     color: #FFFFFF;

    background: #f38ab3; /* Old browsers */

    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

}

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

http://alt-web.blogspot.com/

With respect to Nancy's solution, which is a very robust solution if it weren't for the quirkiness of SpryMenuBar v2.0, please have a look at the following which  is based on detecting the page's URL and comparing this with the link to the menu item.

First add the following to the bottom of you document; you could put into an external JS files and link it to the document.

<script>

function InitPage(){

Spry.$$('#MenuBar li').forEach(function(node){ /*for FF Chrome etc*/

    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

    if(a.href == window.location){

        Spry.Utils.addClassName(node,"activeMenuItem");

    }

});

Spry.$$('#MenuBar div.MenuItemContainer').forEach(function(node){ /*for IE */

    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

    if(a.href == window.location){

        Spry.Utils.addClassName(node,"activeMenuItem");

    }

});

}

Spry.Utils.addLoadListener(InitPage);

</script>

Then add a bit of CSS, probably at the bottom of the style rules created by the widget and placed into your document. This can also be linked to an external CSS file.

<style>

#MenuBar .activeMenuItem .MenuItem {

    color: #8aaad9;

    background: #f38ab3; /* Old browsers */

    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

}

#MenuBar .activeMenuItem .MenuItem .MenuItemLabel {

    color: #8aaad9;

    background: #f38ab3; /* Old browsers */

    background: -moz-linear-gradient(top,  #f38ab3 0%, #f6adcd 40%, #f38ab3 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38ab3), color-stop(40%,#f6adcd), color-stop(100%,#f38ab3)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f38ab3 0%,#f6adcd 40%,#f38ab3 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38ab3', endColorstr='#f38ab3',GradientType=0 ); /* IE6-9 */

}

</style>

Gramps

Ed,

Unfortunately, I don't have time to sift through all your layers of code.

HINT:  For testing purposes, create a plain vanilla page with just one menu and omit other extraneous code / scripts / styles.  Keep it as simple as possible.   

When you get the menu working, then add other luscious ingredients one-at-a-time.  Preview in browsers often to test.

In time, you'll find the right recipe for what you're trying to achieve.  But it takes systematic trial & error.

Good luck,

Nancy O.

Have a look here http://pleysier.com.au/edwin/index.html and choose each menu item. Although I did not change the content of each page, I did change the menu to suit each URL.

Right click in the browser and choose View Source or similar to see what I have done. Also not that I added a closong list tag to ensure that the menu would work.

Gramps