Superfish Menu Block Hidden Behind Following Block in Fusion Theme

,

I have nothing especially original to add here — this page is mostly meant as a bookmark for my memory. The fix for a vertical menu is slightly (but only slightly) different from the solution outlined in the official docs, so here it is.

Essentially, the problem is this: the Fusion theme for Drupal uses Superfish menus. If you have a vertical style menu that expands downwards and you have a block below it, when it expands, the flyout menu will be partialy hidden by the menu block below it.

After much going around, the community came up with a couple of solutions mixed into a long thread on Drupal.org and more succinctly summed up in a support page at Fusion Themes and that content is reiterated on the general Fusion Theme Troubleshooting page. See also the page on Customizing the Fusion dropdown menus which has some useful information on theming that aspect of Fusion. The Fusion folks also have some good instructions on making a slick looking horizontal menu with the second-level menu also horizontal—a neat effect. The third level, if you have one, is then a normal vertical dropdown.

In essence, they suggest setting the containing Drupal block to overflow: visible in the CSS and, if that doesn’t solve the problem, to set the inner block, that is .block .inner to position:static

Neither of those worked for me. I went round and round with this, trying all sorts of combinations, applying these in many combinations to many elements, also playing with position:relative and many other options. Eventually, the solution was dead simple. Assuming that you have a menu named “main” and it’s in a block, then

#block-menu-menu-main {
position:static;
}

That seems to have solved all of my Superfish issues with positioning.

I still couldn’t get the arrows to show using autoArrows, but I simply wanted arrows on all menu items that have a flyout submenu. Since Drupal already applies the class “expanded” to such items, this was easier to do with simple CSS anyway.

li.expanded {
background:url(“/sites/default/themes/acquia_prosper/images/arrow.png”) no-repeat right center transparent;
}

And then finally, to override default Superfish settings as set by Fusion, you simply add a new Superfish initialization function in your js/acquia_prosper_script.js file like so:

Drupal.behaviors.acquia_prosperSuperfish = function (context) {
$(“div.block ul.sf-menu”).superfish({
hoverClass: ‘sfHover’,
delay: 800,
animation: {opacity:’show’,height:’show’},
speed: ‘slow’,
autoArrows: false,
dropShadows: false,
disableHI: false
}).supposition();
};

That pretty much solved my Superfish problems.

One remaining issue is that I wanted some top-level menu items that are NOT links. That is to say, that have no destination page, but only a submenu. Drupal does not by default allow this. The page I mentioned earlier on customizing Fusion dropdowns suggests the Special Menu Items module. I haven’t tried it yet, but it looks like it would do the trick.

One Response to “Superfish Menu Block Hidden Behind Following Block in Fusion Theme”

  1. Thank you! Your superfish hint saved me untold hours of frustration!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>