Navigation small bug

[jjamor]

Hi!

I've discovered two small issues in navigation.

It is present in https://phlow.github.io/feeling-responsive/ and also in my own blog.

With "big" screens, standard browser, Blog menu consists of three elements:

• Blog (dropdown), with a link to /blog/
  • Blog entry (link to /blog/)
  • Blog archive entry (link to /blog/archive)

When you reduce size or ipad browser, you will see:

• Blog (dropdown), without link to /blog, when you click here you will see "back"
  • Blog link
  • Blog archive link

But in android, you will see:

• Blog (dropdown), without link to /blog, when you click here you will see "back"
  But then you will see three links:
  • Blog (I assume this is the link present in Blog dropdown)
  • Blog link
  • Blog archive link

I think this behaviour should be the same in all devices with small screens.

On the other hand, if I remove link to "/blog/" in the dropdown (_data/navigation.yml), a link
to first drop down element is created. It should not have any link, I guess.

I tried to fix it without success ... 😞

[jjamor]

Some captures...

IPAD / reduced browser in PC:

Android phone:

[Phlow]

You're totally right: it should look everywhere the same.

The »mistake« was in _navigation.yml › There were two times a link to Blog. I reduced it. Now it looks better. And the dropdown on desktop browsers has now only a dropdown with Blog Archive

[TWiStErRob]

Actually that <li><a... is generated from JavaScript. It's a known Foundation issue: foundation/foundation-sites#6248 awaiting a PR.

You can patch it for yourself in two ways:

• to show it on both mobile and tablet:
  replace parent-link show-for-small-only with parent-link show-for-medium-down in javascript.js and javascript.min.js

• to hide it in both mobile and tablet:
  add the mobile_show_parent_link option like below in _includes/navigation.html:

  <nav class="top-bar" data-topbar data-options="mobile_show_parent_link:false">

Tip: you can reduce the browser size to mobile width by attaching the Developer Tools to the right of the window (Chrome: button next to close button) and resizing it by its left edge to squeeze the webpage width small enough.

@Phlow I was just writing this up when you commented :)

[TWiStErRob]

The documentation menu has the same problem.

[Phlow]

I did the adjustment to documentation...

In the future, I have to update the whole foundation thing. But I have no time today left to do it and when I want to do it, I have to do it carefully ;)

[jjamor]

Hey @TWiStErRob: I've applied the workaround you suggest in javascript.js and javascript.min.js in my blog, and now it apparently is OK! Many thanks!