Foundation-sites: Arrow Direction Submenu

[bergschrat]

Is it intentional, that the arrows pointing in this direction?

How can we reproduce this bug?

1. Step one: Look at this CodePen:
   http://codepen.io/Owlbertz/pen/qZpwex
2. Step two: Use just the code from http://codepen.io/Owlbertz/pen/qZpwex in an new side (in the CodePen, the hamburger menu works, in an new side not)
3. Step three

What did you expect to happen?
Arrows point to the right
Menu work in small screens
What happened instead?
Arrows point to the left
Menu don't work in small screens
Test case:

Give us a link to a CodePen or JSFiddle that recreates the issue.

• CodePen with Foundation 6 and MotionUI
• CodePen with Foundation 6, Flexbox grid and MotionUI

[Owlbertz]

You don't wanna give me time to fix this by myself, do you? :wink:

[denisahac]

@bergschrat This is actually a feature. You don't want the sub-menu points to a direction where it's not going to be visible.

[Owlbertz]

The direction is correct, but the position is wrong. If the sub menu opens to the left, the arrow should be left of the text I guess...

[coreysyms]

If you all decide to make the switch, here is a code pen of it working, just switching .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left to pseudo:before fixes the issue.
http://codepen.io/anon/pen/redyQV

[bergschrat]

@Owlbertz: Sorry. I thought it would be done.
It's strange. In the CodePen, the hamburger menu in small Screens work. If I use just the Code from the CodePen in a new side, the hamburger menu don't work. I use F 6.2.1 css complete.

[bergschrat]

The menu don't work in small screens, no matter whether right or left.
I use F 6.2.1 for Sites, complete css (checked it also with essential).
Here ist an new side with your code. There is no small menu (no hamburger, the menu don't open). But in your CodePen, it works! I don't know the reason.

• Site Title

• Oberlink 1
• Oberlink 2
  • One
  • One
    • One
    • Two
    • One
      • One
      • Two
      • Three
  • Two
• Oberlink 3

[denisahac]

You should include the complete html code. I suspect you didn't include the necessary javascript files for each component you're using.

Please refer to the official documentation regarding the responsive navigation.

[bergschrat]

Hi denisahac,
I include:
jquery.js
what-input.js
foundation.js
app.js
is this not enough?

[denisahac]

@bergschrat Considering you copied the sample in the codepen, included the scripts and stylesheets you mentioned then it should work as expected.

I'm working on a project and using ZF v6.2.1. Though I'm not using a submenu on a mobile viewport I have the mobile menu working as expected. You can view my project in here

[bergschrat]

I've just noticed that no Java menucode is working for me.
For example: If I copy the code of the Responsive Toggle from
http://foundation.zurb.com/sites/docs/responsive-navigation.html
it don't work. Something must be wrong with the js I downloaded. But I tried the complete css and the essential css. No difference.
I think, I include all that is needed:

foundation.min.css
app.css

and

jquery.js
what-input.js
foundation.js
app.js

jquery.min.js, what is mentioned here
http://foundation.zurb.com/sites/docs/javascript.html
is not in the download folder.

[Owlbertz]

I think a link to your site would be very helpful in order to get this sorted out. I guess it's just one small issue that causes the whole thing to break.

[bergschrat]

@Owlbertz: Here is the URL with the menu:
http://www.ringelrose.de/anni/test.html
and here ist another example with the responsive toggle menucode from the Foundation-Side.
http://www.ringelrose.de/anni/test_toggle.html
Please scale your browser down to see that all menus on mobile don't work.

[Owlbertz]

The CSS on your site is missing the .menu-icon class. Did you include the icons in your Foundation download?

[bergschrat]

I only downloaded css complete, nothing else. Do I have to download something else?

[Owlbertz]

You have to include <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> for the icons.

[bergschrat]

I included the foundation-icons.css. But it still don't work. Please check it:
http://www.ringelrose.de/anni/test.html
http://www.ringelrose.de/anni/test_toggle.html

[Owlbertz]

Sou forgot to include jQuery in that first link. Also I was wrong, you don't actually need to include the icons for that specific icon.
Also, if I substitute your Foundation CSS with this one https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css, then it works. So it has to have something to do with your download...

[bergschrat]

@Owlbertz : It works now!! I only changed foundation.css with foundation.min.css and it works. So the foundation.css in both download folders (complete and essential) must be broken or something.
Thanks alot! Now I can use Foundation 6.2.1.
But strange enough that foundation.css does not work only for me, while other users seem to have no problems with the download.

[JeremyEnglert]

Closing. This appears to be fixed.