Contrib.social

How to apply Bartik main-menu styles to other menu modules similar to Superfish

Open on Drupal.org →
Created on 25 February 2011, over 14 years ago
Updated 19 March 2025, 5 months ago

*Disclaimer*
I have tested this only in Firefox 3 only. I would appreciate if people could post back any formatting problems with other browsers with screen shots so that I can fix them. Thanks in advance.

This post is for those who would like to use the Superfish menu module but have a style close to Bartik for the main navigation.

  1. Create new style sheet (NewStyleSheet.css) and save it to your file directory (e.g., I placed mine in cd%drupalDirectory%\sites\all\files\styles\NewStyleSheet.css).
  2. Edit Block settings for Superfish assuming you are using a template that includes a "Menu Bar" or similar block area. Do this in /admin/structure/block. 
    1. Move Superfish X...in my case I used Superfish 3...to the Menu Bar Region by changing the dropdown selector to Menu Bar.
    2. Click Configure under Operations on the far right.
    3. Under Superfish Settings, change Menu Type to NavBar
    4. I selected 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. This can be done, however it is not part of this DIY.
    5. In Advanced Settings, add your new stylesheet location to Extra CSS (e.g.,  cd%drupalDirectory%\sites\all\files\styles\NewStyleSheet.css).
  3. !Important! If you want to see a full width secondary navigation background, you must do this following if you are using the Pixture Reloaded theme. Open cd%drupalDirectory%\sites\default\files\color\pixture_reloaded-######\colors.css (or where your files are stored) and go to line 264 and make it look like this.
    1. <code>.sf-navbar.sf-style-default li ul {
        /*background-color: transparent !important;*/ /*Comment this line so that the style in the NewStylesheet.css will allow for a full background.*/<br />
            width: 100%;<br />
            }&lt;/code&gt;
  4. !Important! With the above in line #3 still open, comment line #253 which says /*background: #4f5152*/
    1. It is listed under:
      <code>.sf-menu.sf-style-default li:hover, 
      .sf-menu.sf-style-default li.sfHover,<br />
            .sf-menu.sf-style-default li.active a,<br />
            .sf-menu.sf-style-default a:focus,<br />
            .sf-menu.sf-style-default a:hover,<br />
            .sf-menu.sf-style-default a:active,<br />
            .sf-navbar.sf-style-default li li {<br />
            /*background: #4f5152;*/<br />
            }&lt;/code&gt;
  5. Option: I removed the shadow in the default superfish.css on line 131 and 234. It didn't work with my styles and I didn't want to spend any extra time on it.
  6. Copy styles from the attached stylesheet to your new stylesheet. !Important! make sure that your to replace #superfish-3 with the same number as you used for your Superfish module #Number# (e.g., I used Superfish 3 module, hence my stylesheet names will be #superfish-3).

CSS file attached

/* $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-arrows 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 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 default background from 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 nav only*/
background:none repeat scroll 0% 0% rgb(51, 51, 51);
background: #333;
}
ul#superfish-3 > li > ul{
left:-15px;/*align menu with left edge of design*/
border-right:30px solid #333;/*add background color to right edge because 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;
}

📌 Task
Status

Closed: outdated

Component

Missing documentation

Created by

🇺🇸United States erok415

Live updates comments and jobs are added and updated live.
  • theming

    Used in Documentation issues related to theming

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024