Home > WordPress Menubar > Superfish Questions & Answers

Superfish Questions & Answers

October 28th, 2009 Leave a comment Go to comments

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 Eidoku,

    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!

  1. No trackbacks yet.

Spam Protection by WP-SpamFree