Clear Background for Superfish

Permalink Browser Info Environment
I recently downloaded Superfish to add dropdown navigation to our website ( However, our site is designed to have our navigation in a colored bar (e.g. Does anyone know of a way to set the background color to clear so the navigation in white text will show over the colored bar as it currently does?

Any help would be great appreciated.



Type: Discussion
Status: New
View Replies:
andrew replied on at Permalink Reply
You will probably have to modify the view template directly.

Create a directory named autonav in your local blocks/ directory, and copy packages/superfish/blocks/autonav/view.php to this directory, and open it and make changes to the code itself.

Then, open view.php and look for lines referencing <?php echo $controller->menuColor ?>. Change those CSS lines to use transparent instead of the color.
jmlitch99 replied on at Permalink Reply
Thanks andrew. I will give that a try.
plschneide replied on at Permalink Reply
To get a gradient in the menu background instead of just a color, I added the following lines to the CSS

changed - .sf-menu a to be

.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .6em 1em;
/*Changed first from .75 to .5 */

/* Paul Mod */
border: 0px none;
background-image: url(bluebar.png);
background-position:left top;

To make it easy on me I threw the image in the same folder as the CSS.
geek2009 replied on at Permalink Reply
I am looking to do the same thing, but am not having as much luck. I would like to have the first pages be transparent (a image is already behind them) and have all of the sub-pages use a color. How would I do this?
dekelly replied on at Permalink Reply
I did this by modifying view.php;

#sf-menu<?php   echo $bID?> .sf-menu li{background:none}
<?php    if(strlen($controller->menuColor)){ ?>
#sf-menu<?php   echo $bID?> .sf-menu li li{background-color:<?php   echo $controller->menuColor ?> !important}
<?php    } ?>
<?php    if(strlen($controller->menuColor)){ ?>
#sf-menu<?php   echo $bID?> .sf-menu li li li{background-color:<?php   echo $controller->menuColor ?> !important}
<?php    } ?>
geek2009 replied on at Permalink Reply
This worked perfect! Thanks a bunch!!
geek2009 replied on at Permalink Reply
What do I need to edit to change the color of the sub-pages? This did work for the first level though.
MattWaters replied on at Permalink Reply
Take a look at the code snippet above. The first level of li elements is set to background-color: none. Below are declarations for the nested li elements-- li li and li li li. These still refer to $controller to get their colors.

Modify 'em like in the first level (cut out the php chunk and replace it with background-color: none) and I think it'll work.
geek2009 replied on at Permalink Reply
It works!! Thank you!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.