Home > WordPress Menubar > Superfish Questions & Answers

Superfish Questions & Answers

Q #1: How do I change the overall width of the Superfish Menubar template?

A: You have to edit the Superfish CSS file you are using. For instance if you are using ssf-green.css, open that file, locate the following rule and change the margin property as shown:

.ssf-green-wrap {
margin: 10px 0 0 0;
margin: 10px 10px 0 10px;
...
}

Then locate the following rule and change the margin property again:

.ssf-green-after {
...
margin: 0;
margin: 0 10px 0 10px;
...
}

Save your CSS file, ssf-green.css in this case, and reload your page to see the change in the menubar width.

Q #2: How do I change the width of the Superfish sub-menus?

A: You have to edit the Superfish CSS file you are using. For instance if you are using ssf-green.css, open that file, locate the following rule and change the width property as shown:

.ssf-green ul {
...
width: 10em; /* left offset of submenus need to match (see below) */
width: 15em; /* left offset of submenus need to match (see below) */
}

Then locate the following two rules and change the left property in both of them:

ul.ssf-green li li.wpm-hover ul {
left: 10em; /* match ul width */
left: 15em; /* match ul width */
...
}

ul.ssf-green li li li.wpm-hover ul {
left: 10em; /* match ul width */
left: 15em; /* match ul width */
...
}

Save your CSS file, ssf-green.css in this case, and reload your page to see the change in the sub-menus width.

Categories: WordPress Menubar
  1. January 13th, 2010 at 23:36 | #834

    hi,

    i think i have the same question that igor had back on October 2.

    i have the following code:

    .sf-blue li.selected,
    .sf-blue li.current-cat,
    .sf-blue li.current-cat-parent,
    .sf-blue li.current_page_item,
    .sf-blue li.current_page_parent,
    .sf-blue li.current_page_ancestor {
    background: white;
    color: black;
    }

    the background works fine; but i can’t gain any control over the font color. “color:black”, as it is above, doesn’t work.

    any chance you can help me figure out the solution?

    here’s a link to the site: http://dev.wearebinary.com/about/

    thanks much!

  2. eikoku
    April 26th, 2010 at 08:23 | #1139

    How do i change the order of submenu?

  3. April 28th, 2010 at 15:44 | #1143

    Hello Eikoku,

    I think you are interested in the page submenus or category submenus, since they are generated automatically. The pages can be reordered changing their menu order in the WordPress admin, while the categories are always alphabetically ordered.

  4. eikoku
    May 7th, 2010 at 16:44 | #1151

    @andrea
    Thanks! can you use “order by slug”? I like to re-order the categories by slug.

  5. May 8th, 2010 at 22:57 | #1154

    @eikoku
    Sure! Simply edit the function wpm_get_cats in wpm-db.php, replacing ‘ORDER BY t.name’ with ‘ORDER BY t.slug’.

  6. eikoku
    May 10th, 2010 at 09:13 | #1156

    This is great! Thank you!

  7. July 12th, 2010 at 22:23 | #1228

    I have the same question as Sergi.

    It seems the color controlled by the main .css file for the site. How can that be overwritten for the menu without changing the content fonts?

    was this an oversight in the main code? how can the function of changing fonts be moved to the in use sf-menu.css?

    Thanks for the menu .. it’s helped me a lot!

  8. bhargav
    March 18th, 2011 at 10:07 | #1660

    if (!IsPostBack)
    {
    SooperFish spoorfishMenu = new SooperFish();
    Literal1.Text = spoorfishMenu.ExecuteXSLTransformation();
    }

    where should i include this??????

  9. March 19th, 2011 at 02:39 | #1661

    @bhargav
    Hi Bhargav,

    I’m afraid you’re asking in the wrong place …

  10. Tom
    July 13th, 2011 at 10:03 | #1845

    Hi

    I have a question (yeah…again !). I ‘ve created sevral CSS class to organize my menubar.
    At the end of the bar, I created 2 flags (english and spanish) using “backgroud: url(….)”. These “flags menu” also have sub-menus.

    My probleme is: when you select the Spanish Flag (at the end of the bar) it shows the sub-menu, but when you drag your mouse on the right of the box, the hover is still active and you make the sub menu appear.
    It seems like the box is too much wide, but I tried reducing the margin and the padding, but nothing works.
    Can you tell me how to reduce the selection zone

    THX
    Tom

  11. September 15th, 2011 at 18:12 | #1912

    cannot find the superfish menu CSS .. am using wordpress w/ platform pro … any idea where it is .. have looked though requisite plugins, etc.

  12. September 15th, 2011 at 23:32 | #1913

    On a standard WordPress installation, the Superfish CSS is in the wp-content/plugins/menubar-templates/Superfish folder. I guess you can find it there as well.

  1. No trackbacks yet.

Spam Protection by WP-SpamFree