I have enabled Superfish menus in other themes for this site (Bartik , Marinelli and Pixture Reloaded), without problems. However, menus will not drop down in the Corolla theme.

I have been through the entire issues queue for Corolla and tried every suggested solution, however, none has had any effect. I've messed around with the style sheets trying to get the z-index to resolve properly, without luck.

In an attempt to at least prove to myself that is is a z-index issue, I have placed Main Menus in the Menu Bar and Highlight areas of www.nicksnose.com/drupal.

In their unaltered state, neither would display drop downs. I inserted HTML to force taller divs in each:

<div style="height:50px; width:100%; border:thin; border:#F00; border-style:solid;>,</div>

The Menu Bar Superfish shows the drop downs but loses focus as soon as the cursor gets down to where the Header div starts. The Highlights menu seems to work as long as the inserted div has a height greater than 0px. That seems to be enough to let the drop downs appear and they, unlike the Menu Bar, do not lose focus once the cursor gets out of the added div.

(I have applied a style to the Menu Bar menu because the inserted HTML caused the None setting in Superfish to lose the inherited Menu Bar style.)

the Site is D7.12 with AT Core 7.x-3.0-alpha5.

I have tried Mega Menus and Nice Menus. Both exhibit the same z-index related problem.

Please take a look and let me know what you think is up. I'm really stumped and really like Corolla. I would hate to have to give up on it.

Any help would be tremendously appreciated.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Druper’s picture

I thought I'd add a couple of screen shots, in case the site has changed by the time anyone looks at this.

Druper’s picture

FileSize
127.13 KB

And one more.

dddave’s picture

You are using the new branch for Adaptive core and the sub-themes aren't optimized yet. Check #1497224: Upgrading 7.x-2.x sub-themes to work on 7.x-3.x for further info and perhaps link your issue there so that Jeff has this issue on his radar.

Jeff Burnz’s picture

I don't really know what you are expecting here - you are using a Superfish menu outside of a region it has support for, and in the one that it does you have the default style on, you are meant to use the None style.

Corolla has support Superfish in two regions, the header region and the menu bar (the one at the very top), both must have the style set to None. If you want something bespoke other than that, then the onus is on you to know CSS to get the job done, I can only provide so much, and what is provided appears to suffice for a great many users. I have never seen the point in writing screeds of CSS to support every use case, many of which are edge cases. The alternative is do nothing, I don't want to do nothing, I want to provide a well styled, integrative design experience without throwing the kitchen sink in the CSS files.

If there is a bug with the theme, tell me about it, but what I see so far is you trying to use it "not as it was designed to work". Want something more, and I know you do, and already offered my help, when I have the time, which is not right now, then please be patient, I can get to "free support" after I have satisfied lifes other requirements.

Druper’s picture

Sorry, I thought I was clear that I had intentionally junked up the code:

In an attempt to at least prove to myself that is is a z-index issue, I have placed Main Menus in the Menu Bar and Highlight areas of www.nicksnose.com/drupal.

In their unaltered state, neither would display drop downs. I inserted HTML to force taller divs in each:

<div style="height:50px; width:100%; border:thin; border:#F00; border-style:solid;>,</div>

The Menu Bar Superfish shows the drop downs but loses focus as soon as the cursor gets down to where the Header div starts. The Highlights menu seems to work as long as the inserted div has a height greater than 0px. That seems to be enough to let the drop downs appear and they, unlike the Menu Bar, do not lose focus once the cursor gets out of the added div.

(I have applied a style to the Menu Bar menu because the inserted HTML caused the None setting in Superfish to lose the inherited Menu Bar style.)

I have just removed all the funky stuff; removed Superfish Menu from Highlight area and re-applied None style setting to the Superfish Menu in Menu Bar area. You can see what happens, no drop down.

I saw the latest update for AT (adaptivetheme 7.x-3.0-beta1) and applied it, along with getting CCK and a few other things up to date. I thought that might help but there was no change in the menu behavior.

Net, net, both superfish and colorbox appear to be having z-index issues in Corolla (but not Pixture Reloaded, another AT theme.)

I know I'm using AT 7.x-3 with a 7.x-2 version of Corolla, maybe I should try downgrading to AT 7.x-2, try ddave's suggestions or just shut up until Corolla 7.x-3 arrives.

In any event, I very much appreciate your help, I know you have your hands full and am sorry that we had any miscommunication.

Jeff Burnz’s picture

No, this has nothing to do with z-index, I already mentioned in another thread somewhere else this is to do with display properties, and this wont work as dddave says, you are using the wrong version of the base theme - even if you change the display property the classes around main menus have changed wee bit and the menu will not render correctly.

Look at the demo, omg, drop menus working with Superfish and Corolla on AT 7.x-2.2

http://adaptivethemes.com/demos/contrib/?theme=corolla

Druper’s picture

Guh!

Just downgraded to AT 7.x-2.2 and still no go. I hadn't been to the demo site since researching themes in general but now I remember where I saw the Corolla menu working!

I'm going to have to mess around with this some more. Something must be conflicting or sump'n.

tassoman’s picture

Version: 7.x-2.x-dev » 7.x-2.2

I have the same problem using 7.x-2.2 recommended version, menu is set correctly (show childs, with child items) but nothing happens hovering the parent item.

Is Superfish Module a dependency in corolla-7.x-2.2 ? If that, it didn't asked neither this neither adaptive-theme as dependency while installing by drush pm.

Jeff Burnz’s picture

Version: 7.x-2.2 » 7.x-2.x-dev
Category: support » task

tassoman: showing child items etc (I think you mean expanded) is not a requirement for using Superfish module, its smart enough to not have to worry about this. Have you installed the Superfish library? You need to give a lot more information.

Druper’s picture

Jeff, I gave up on trying to fix the existing site and started again from scratch. I disabled everything that I could in an attempt to find a conflicting module or theme but could never get it to work. New build works fine. (I haven't posted it yet, in case you want to figure out why the build that's posted now didn't work, http://nicksnose.com/drupal)

Luckily, I was able to import views, variants, etc. so rebuilding was not as horrible as it might have been.

It's weird. Menu and Colorbox were working in Corolla, then they weren't.

duns’s picture

Issue tags: +superfish, +Corolla, +z-index

Having an issue like yours with dropdown menu displayed behind main content (in IE10) and was able to solve it by tweaking z-index of the menu-bar class block.

I've edited sites/all/themes/corolla/css/blocks.css
and added z-index : 1; here :

#menu-bar .block {
  float: left;
  clear: none;
  margin-bottom: 0;
  z-index:1;
}

Possibly better is to add also position : relative; but i'm not sure of side effect...
Don't forget to clear the cache after that.
Have just tested it in IE8-IE9-IE10

As an additional information :
Don't go beyond z-index : 999 if you use administration menu like me

Used versions :
Corolla 7.x-3.0-rc1
AT Core 7.x-3.1
Superfish 7.x-1.9 (with the Library taken from the url provided at adaptivethemes.com)
Drupal 7.22

Hope this help. Thanx for all the good work :)

richienabuk’s picture

I'm new to drupal. Superfish menu dropdown isn't working. i have tried all the available recommendation i see online, nothing seems to be working.
I'm using drupal 7.31 with Zen customized subtheme.
i have a slideshow carousel on the frontpage.
The dropdown menu only works immediately i clear cache and the slideshow has not loaded.
Afterwards, it won't work.

Pls help me ASAP.

see page at http://pluralcoder.com/uyocatholicdiocese

dddave’s picture

@richienabuk If you are using a Zen subtheme why are you posting this here in the Corolla queue which is a subtheme of AdaptiveTheme? Or am I missing something.

richienabuk’s picture

@dddave, as i said earlier, i'm new to drupal. didn't take note of that.
Thanks for informing me.
I've resolved the issue. It was the jquery version. i reverted it to version 1.8 and the dropdown started working perfectly.

dddave’s picture

@richienabuk
No biggie. These jquery versions issues tend to haunt us (have you checked if 1.8 messes up your backend ;)).

jmatuska’s picture

@richienabuk
Same issue for me > drop-down menus not working. and, thanks to your jQuery tip, i downgraded. first from 1.10 first to 1.9 (no joy) and then to 1.8. Success. Thanks for the heads-up on the jQuery conflict.

@dddave
I will be on the lookout to make sure it doesn't mess w/backend.

Thanks all.

ptocco’s picture

One thing I found with my Superfish menu in the Bootstrap theme is that it was not displaying any dropdown when the page was squeezed down to a narrow size and the hamburger menu popped up. Clicking the burger opened up only 1 row, with no dropdowns. I checked the css style and it was showing that the overflow property was set to Auto, meaning it did not allow overflow in this case. So I set a new rule, making overflow Visible. The menu was then able to expand to the full mobile-friendly vertical tabs when the burger was clicked.

This may or may not be relevant but I thought it worth passing on because others may have the same issue. The Superfish menu did not have this problem in another theme I use, Responsive Bartik.

mactinos’s picture

Hi, what is the best and easiest way to downgrade jquery back to version 1.8?

Thanks!

ptocco’s picture

mactinos, you can control the jquery version with the jQuery Update module. It allows you to set one version for administration and another for everything else. This is good when your apps require a more current version than Drupal's internal function can handle. Try setting the default Drupal jquery to 1.10 and the admin version to "Default jQuery Version."