I found a report, How to apply Bartik main-menu styles to other menu modules similar to Superfish. Essentially, the trick is not to apply the CSS styles used by Superfish in the CSS styles used by the theme, but to include the CSS styles used by the theme in the CSS styles used by Superfish.
The steps reported in that post are the following (I am editing them to change the format).
- Create a new style sheet (NewStyleSheet.css) and save it to your file directory.
- Edit the block settings for Superfish in /admin/structure/block. This step list assumes you are using a template that includes a "Menu Bar" or similar block area.
- Move the block "Superfish X" to the "Menu Bar" region, by changing the drop down selector value to "Menu Bar."
- Click "Configure" under "Operations," on the far right of the setting page.
- Under "Superfish Settings," change "Menu Type" to "NavBar."
- Optionally, select "NO" on both "Drop shadows" and "Auto-arrows", as this would take more time to modify the CSS to get them to show up properly.
- In "Advanced Settings," add your new stylesheet location to "Extra CSS."
This is the content of the new CSS file.
/* $Id: whiteTab.css,v 1.0 2011/02/18 05:45:00 erok415 Exp $ */
/*-------------------------------------------------------------*/
/* */
/* Important - Be sure to change all references */
/* from #superfish-3 below to match the number of the */
/* Superfish "X" block region you are using in your */
/* Block Settings. I used block region Superfish 3, */
/* hence I am using #superfish-3 below. */
/* */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* */
/* I have not attempted to use style the 4th level flyout, */
/* Auto-arros or the drop shadow features. */
/* */
/*-------------------------------------------------------------*/
#menu-bar{
margin-bottom:10px;/* Add padding so secondary navigation doesn't run over search sidebar. */
}
sfHover, ul#superfish-3 > li:hover{
background: none repeat scroll 0% 0% transparent; /* Remove the default background on top level tabs in default state and hover state. */
}
ul#superfish-3 li.sfHover li a:hover, ul#superfish-3 li.sfHover li a.active{ /*Secondary Nav: add effect to hover or active state here. */
color:#09F;
width:100%;
}
ul#superfish-3 > li > a{ /* Fist level horizontal navigation. */
margin:4px 2px 0 0; /* Spacing around tabs. */
color: #333;
background: #fff;
background: rgba(255, 255, 255, 1.0);
float: left; /* LTR */
padding:0px 6px 6px 6px;
/* height: 1.8em;
line-height: 2.4em;
padding: 0 0.8em; */
text-decoration: none;
/* text-shadow: 0 0.5px #999; */
font-weight:bold;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
ul#superfish-3 > li.sfHover {
background: none repeat scroll 0% 0% transparent; /* Remove the default background from the sfHover state. */
}
ul#superfish-3 > li.sfHover > a { /* First level hover and active state. */
margin:4px 2px 0 0; /* Spacing around tabs. */
color: #333;
background: #999;
background: rgba(153, 153, 153, 1.0);
float: left; /* LTR */
padding:0px 6px 6px 6px;
/* height: 1.8em;
line-height: 2.4em;
padding: 0 0.8em; */
text-decoration: none;
/* text-shadow: 0 0.5px #999; */
font-weight:bold;
-khtml-border-radius-topleft: 8px;
-khtml-border-radius-topright: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/*------------------- Secondary Nav -------------------*/
.sf-navbar > li > ul{ /* Add background color to secondary nab only. */
background:none repeat scroll 0% 0% rgb(51, 51, 51);
background: #333;
}
ul#superfish-3 > li > ul{
left:-15px; /* Align the menu with the left edge of design. */
border-right:30px solid #333;/* Add the background color to the right edge because the style attribute above leaves a blank spot due to global conditions. */
}
ul#superfish-3 > li > ul > li {
left:15px;/*Fix: aligns secondary level nav text with top level nav*/
border:0;
}
ul#superfish-3 > li.sfHover > ul > li > a{ /* Secondary Nav: Remove tab effect from sfHover state applied to lower level nav. */
color:#fff;
background: #333;
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-top: 0px;
border-radius: 0px;
width:100%;
height:2.0em;
line-height:1.1em;
padding:6px 0 0 6px;
margin:0 16px 0 0;
}
ul#superfish-3 > li > ul > li > a{ /* Secondary horizontal navigation. */
color:#fff;
font-weight:bold;
/* text-shadow: 0 0.5px #CCC; */
background: none repeat scroll 0% 0% transparent;
-khtml-border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
padding:0;
}
/*--------------- Third level DropDown navigation ------------*/
ul#superfish-3 > li > ul > li > ul {
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-top: 0px;
border-radius: 0px;
margin:0;
padding:0 0 0 6px;
border:0;
left:-0px;
background: none repeat scroll 0% 0% transparent;
}
ul#superfish-3 > li > ul > li > ul > li {
margin:0px;
border-right:0;
left:0;
border:0;
padding:6px 6px 0px 6px;
background:#333;
}
ul#superfish-3 > li > ul > li > ul > li:hover{
}
ul#superfish-3 > li > ul > li > ul > li > a {
background:#333;
margin:0;
padding:0 6px 0px 6px;
line-height:1.3em;
background:#333;
}
ul#superfish-3 > li > ul > li > ul > li > a:hover {
background: none repeat scroll 0% 0% transparent !important;
}
