Where is the problem hiding?

I’m currently working on a site design using a dropdown menu. After hours (days) of fiddling around I still do not see what is causing the dropdown to hide after some other part? Any one who can see where the problem one is hiding?

http://testcom.vini4all.nl/ as you can see when hovering over the menu it hides only after a minimal sliding down the page it shows correctly.

2 The other problem is when using the mobile view. The x sign is not showing correctly (tried to scale it down a bit having a nicer design). Which parts of the “hamburger - cross” are the ones to change to get this right?

There is a mouseout event for the component by Foundation Sites which does this:

Also you are using an old version of Foundation Sites and there is some other error:

See the docs:

You may want to set data-autoclose to false.

I doubt that this is our hamburger icon.
We do not have this close icon (but a simple CSS based solution which does not use three divs).
Because I can not find the code at https://raw.githubusercontent.com/foundation/foundation-sites/v6.4.2/dist/css/foundation.css so I don’t know.

It is an piece off code which was proposed to me by one of your collegues through the older Foundation forum. Maybe there is still a codepen around which has this. Where can I found the original hamburger / drop-down? So I can use that again.

Do you mean ZURB? Because Foundation Sites is now a community project which is not maintained by ZURB anymore and I am not aware of any colleagues as I am one of the maintainers working on Foundation Sites but I am not from ZURB :wink:

The old forum was closed and this is the new one here. I am not aware of such hamburger code. Neither in our current docs or building blocks (only https://get.foundation/building-blocks/blocks/responsive-hidden-nav.html which uses the original mixin).

There are probably better solutions by others on codepen.io.

Yes I meant the old Zurb forum. I know that it is no longer there (even better because it was a lot of spam and not much help).
I will look for an other solution than :slight_smile:

The menu itself has been working ok before. But after some css changes it is behaving like this. Looks like the dropdown is getting an lower z-index until a certain point. And than comes on top again.

I can’t reproduce it on Firefox. At least not with this amount of information.

Please provide a screenshot or video, which shows the issue. Also try to apply a z-index to the whole dropdown-menu component.

Because it seems I misunderstood your problem because there were no clear details.

Best is to remove other css and js files and check what causes this.

I juts discovered that in Safari it is even worse. So I will try to provide more info. And fiddle around with the z-index a bit. I think it happens when I tried to design the mobile layout. I will see what happens if i leave the @media rules out.

I had a quick-look at the site. The dropdown menu items are hiding - even though you have increased the z-index on the submenu, the link is still at z-index: auto. I added
.dropdown.menu a { z-index: inherit}, and it seemed to work. (In firefox dev mode).

Also your dropdown arrows are invisible until too late. They probably need to take take the same color as the menu highlight (lovely red), or the text.

Hope this helps


After looking at it again. The one thing that helped t solve all problems was setting:
.off-canvas-wrapper {
position: relative;
overflow: visible;
Which had hidden by default. So far I can see there’s no problem after changing this.
Thinking any further how this could become the problem it might be caused by having a

to much or less in my html somewhere. So I have to sort that out I guess. :smile: