How to replace the Bartik default menu with Superfish

Question

Since the default Bartik menu doesn't allow me to create a sub menu with styles, I created a Superfish menu.
How can I replace the Bartik default menu with Superfish on the exact place?

@googletorp i think the first one is module recommendation but this one is how to achieve. do you think it is absolutely duplicate :) anyway i'd like to edit my question to a deferent one if it is possible. — jone, Commented Apr 26, 2011 at 9:13
the two questions are the same worded a bit differently. You should edit your original question, and if that makes it significantly different from the one that it has been marked duplicate off, you can flag it and ask for moderator attention. Then I or one of the other moderators will take a look, and reopen if needed. — googletorp, Commented Apr 26, 2011 at 9:32
You should spend some time on your question clear and descriptive. Now I don't know what you are asking anymore. — googletorp, Commented Apr 26, 2011 at 10:02
@googletorp I solved my first question using Superfish, but when I google "replacing bartik default menu with Superfish," I don't find anything helpful; that is why I asked this question. I thought this question was clear, and many people want it. if you still think this question is not clear, it doesn't matter; you can leave it as it is, or you can delete it. — jone, Commented Apr 26, 2011 at 10:10

avpaderno · Accepted Answer · 2011-04-26 14:21:30Z

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 to 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;
}

Thank you so much... Bartik doesn't have "Menu Bar" the default menu place is the right place. for now i have put it one the "header" block, how can i put it on the default place. i really appreciated your help. — jone, Commented Apr 26, 2011 at 14:21
@jone in Bartik, the "Main menu" links, which by default contains the "Home" link, are placed in the "Header" region, in a <div> tag with "main-menu" as CSS ID, and "navigation" as CSS class. If you want to put the Superfish menu in the same position, then I would suggest to sub-theme Bartik, and add a new region, which is exactly placed where the "main menu" links are placed. — avpaderno, Commented Apr 26, 2011 at 14:35
you mean there is a them called "sub-theme Bartik" i'm really newbie for drupal please more be specific — jone, Commented Apr 26, 2011 at 14:47
@jone It means you can create a theme that set Bartik as parent theme; to make an example, the Minelli theme is a sub-theme of Garland. You create a sub-theme when you need to alter a theme, but you don't want to change the files used by that theme. Altering Bartik files, as Bartik is the default theme in Drupal 7, is not suggested. You could lose the files you altered all times you update Drupal 7 to the latest version, and if you keep your modified files you would have files that could not contain a fix for an eventual bug that has been discovered in Bartik. — avpaderno, Commented Apr 26, 2011 at 16:51

PWM · Accepted Answer · 2014-03-21 02:53:55Z

Thanks for these instructions but I think I've found a better way to approximate the Bartik look:

Do almost the same as above but for the Menu Type, choose 'Horizontal' instead and then use my code below to make the style of the actual the CSS resemble Bartik's menus.

Here is my SASS code which I called 'superfish-bartik.scss'. Just make sure to point Superfish towards that custom file in Path to CSS file(s) as directed above.

.block-superfish {    
  position: absolute; /* position at bottom of header region */
  left: 0;
  bottom:0;   
  ul.sf-menu {
    background-color: transparent;
    li {
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(255, 255, 255);
        /* RGBa with 0.6 opacity */
        background: rgba(255, 255, 255, 0.6);
        /* For IE 5.5 - 7*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
        /* For IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
        margin: 0 2px;
        border-radius: 8px 8px 0 0;
        &:hover {
            background: rgba(255, 255, 255, 0.9);
        }
        a {
            color: #000;
            font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
            padding: 10px;
            text-decoration: none;
        }
        ul {
            margin-top: 3px;
            li {
                border-radius: 0;
            }
        }
    }
}

And here is the CSS if you don't use SASS:

  .block-superfish {
      position: absolute; /* position at bottom of header region */
      left: 0;
      bottom:0;  
    }
  .block-superfish ul.sf-menu {
    background-color: transparent; }
    .block-superfish ul.sf-menu li {
      /* Fallback for web browsers that doesn't support RGBa */
      background: white;
      /* RGBa with 0.6 opacity */
      background: rgba(255, 255, 255, 0.6);
      /* For IE 5.5 - 7*/
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
      /* For IE 8*/
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
      margin: 0 2px;
      border-radius: 8px 8px 0 0; }
      .block-superfish ul.sf-menu li:hover {
        background: rgba(255, 255, 255, 0.9); }
      .block-superfish ul.sf-menu li a {
        color: #000;
        font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 10px;
        text-decoration: none; }
      .block-superfish ul.sf-menu li ul {
        margin-top: 3px; }
        .block-superfish ul.sf-menu li ul li {
          border-radius: 0; }

Stack Exchange Network

How to replace the Bartik default menu with Superfish

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
7
routes
or ask your own question.

Linked

Hot Network Questions

How to replace the Bartik default menu with Superfish

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged 7routes or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
7
routes
or ask your own question.