Navigation Widget style

The bug is in the superfish configuration. You can work around it by replacing the content of the web_resources\widgets
avBar\js
avbar.js file with this:

$(document).ready(function(){ 
        $("ul.sf-menu").superfish({ 
            pathClass:  'current',
            pathLevels: 0,
            autoArrows:  false
        }); 
});

This will be corrected in version 1.5.

Hey, that worked! Yay!

Now I just have to work on the “getting it centered” issue.

Glad to hear it. To center it, you’re centering one div (the nav widget) inside of another div (the region). To do this, you need to set a width for the nav widget div, and then set margin-left and margin-right to auto. E.g.


/* center the nav widget inside of barmenu region */

/* set a width and margin on the nav widget div that is inside the barmenu region */
div#barmenu div.perc-navbar { 
width: 500px;  /* set this just big enough so that your menu fits without wraps */
margin-left: auto;
margin-right: auto;
}

/* set the width on the containing barmenu region so it fills out the entire width of the page (usually this value is derived from the width on the outermost container region) */
div#barmenu {
width: 800px;  
}

As it turns out, we don’t want the nav centered, we want it justified, which is as easy as making the width of the li just wide enough that it doesn’t wrap.

In any event, now we’re having other issues. When I have the mouse over a specific item in the nav, it has a baby blue background. We want to change that behavior so that the only thing different about the selected item is the color of the link.

I’ve tried this:

div#barmenu .sf-menu>li, div#barmenu .sf-menu>li:hover {
	width: 127px;

	background-image: url("img/topbuttonbg.jpg");
	background-repeat: no-repeat;
	background-color: inherit;
}

…but the background still says the same baby blue color on the selected item. Am I doing something wrong?

The light blue bg color is actually coming from the child <a> element, not the <li> element. If you add the following, it will remove the undesired color from the top level: div#barmenu .sf-menu>li>a, div#barmenu .sf-menu>li>a:hover

This is highly specific to only the first level. Remove the direct descendent combinator after sf-menu to apply it to all levels.