How to link top-level “section” navigation items when using Zurb Foundation's top bar navigation component?

Question

I am building a site using the Zurb Foundation UI framework, and I am wondering how to go about top-level navigation links so that they work for both desktop and mobile visitors.

EDIT: Here's an example: http://meowzen.com/zurb-nav/

Section 1 <-- should take the visitor to a "section" page

--Sub-Section 1 <-- should take the visitor to a "sub-section" page

--Sub-Section 2 <-- ditto

--etc

In the example via the link above, you'll notice that all links work as expected on a large screen. However, when the responsive navigation kicks in (either by resizing the window or viewing the page on a mobile device), the "section" pages aren't accessible through the menu anymore.

Has anyone come up against this problem? Do you have any suggestions on how to go about this?

Many thanks in advance!

EDIT: Here are some options I have at the moment:

Option 1: Only show top-level 'sections' for the mobile navigation - here's an example: projection . pixar . com . <- I'm leaning towards this!

Option 2: Make the section names linkable - I believe it's possible because there's a working example here: emerilsrestaurants . com .

Option 3: Insert a dummy menu item for the section pages at the sub-section level .

Answer 1

In the example via the link above, you'll notice that all links work as expected on a large screen. However, when the responsive navigation kicks in (either by resizing the window or viewing the page on a mobile device), the "section" pages aren't accessible through the menu anymore.

I am not sure I am understanding you correctly, but your example is working as expected. For smaller viewports ("mobile" view) the menu is hidden in a dropdown component. Once you drop down the menu, sub-menu items are still navegable on click.