Menu icon Foundation
Offcanvas dropdown not on top!

I applied a off canvas drop-down menu for  my site. When having the mobile screen size in landscape the drop down are not visible any more! They appear to be behind the "canvass".
I tried to fiddle around finding a solution by applying a z-index but that did not help me much. Now I am stuck on this! Can any one please have a look and give me a hint where to look for? Thanks that would be great!

This is the site: www.menes2.h-kracht.nl

 

W.

offcanvas dropdown menu

I applied a off canvas drop-down menu for  my site. When having the mobile screen size in landscape the drop down are not visible any more! They appear to be behind the "canvass".
I tried to fiddle around finding a solution by applying a z-index but that did not help me much. Now I am stuck on this! Can any one please have a look and give me a hint where to look for? Thanks that would be great!

This is the site: www.menes2.h-kracht.nl

 

W.

Wiechert Hooghwinkel over 2 years ago

Hi any thoughts on this? Would be very helpful thanks!

 

Wiechert Hooghwinkel over 2 years ago

Still did not get it right. Can anyone have a look and pint me in the right direction please? Thanks a lot!

 

W

Brett Mason over 2 years ago

I think the problem here is you are trying to use a dropdown menu where its really not suitable (in my opinion).
You would be much better off using the drilldown or accordion menu components for the menu within the off canvas.

Here's the docs for the drilldown: http://foundation.zurb.com/sites/docs/drilldown-menu.html
And accordion menu: http://foundation.zurb.com/sites/docs/accordion-menu.html

Wiechert Hooghwinkel over 2 years ago

Brett thanks for your reply. I'm always willing to learn so it would be nice to know why you think the drop-down menu is not suitable here?

I will try one of the other menu types. Let see how that is working out. :)

Thanks W.

Brett Mason over 2 years ago

Well, generally a dropdown menu would normally be used for non-touch devices (though there are exceptions of course) which tend to be on small screens.

Also the dropdown menu plugin detects the container its in so it doesn't get hidden, so another menu plugin would be my suggestion :)

Wiechert Hooghwinkel over 2 years ago

Ok , I applied the accordion menu and that is working much better. The only strange thing here is, that in "mobile" size the first link from the accordion (drop-down) is not accessible while in large screen-view it is? Can that link made accessible as well?

 

W.

 

 

Brett Mason over 2 years ago

Unfortunately with the accordion menu that isn't currently possible. However I Have created a PR on Github for the feature: https://github.com/zurb/foundation-sites/pull/9348

What you probably want then is a drilldown menu, and then set the `data-parent-link="true" attribute. This will allow the parent link to work as you want.

Wiechert Hooghwinkel over 2 years ago

Ok will try with the drilldown menu :) Thanks

Wiechert Hooghwinkel over 2 years ago

The drill-down is giving me the result needed. Nice.

Only one thing left:

If I want to translate the word "back" into an other language, which is generated by the js, what is the best way to deal with that?
Made me wondering, now I have only one language but some times you will have a multi language site how will that work out than?

 

W.