Menu icon Foundation
Top bar parent links

I'm sure there have been a few others with this problem, but after doing some thorough searching on this forum & Google, I can't seem to find a solution relating to Foundation 5.

When using the top bar plugin for Foundation, once the screen is reduced to small/medium view, the menu's parent items click through to display the sub menu items (if it has a sub menu). But what if we want to allow the user to access the parent menu item's link?

In my opinion, from a usability point-of-view there should be an option to display the parent item's link when the sub-menu is revealed.

Any help on this would be great.

topbarstylinglinksbuttonsmobile

I'm sure there have been a few others with this problem, but after doing some thorough searching on this forum & Google, I can't seem to find a solution relating to Foundation 5.

When using the top bar plugin for Foundation, once the screen is reduced to small/medium view, the menu's parent items click through to display the sub menu items (if it has a sub menu). But what if we want to allow the user to access the parent menu item's link?

In my opinion, from a usability point-of-view there should be an option to display the parent item's link when the sub-menu is revealed.

Any help on this would be great.

Jeremy Englert almost 6 years ago

Ran into this issue as well - I ended up having the offcanvas navigation show for "small" screens, which is much more mobile friendly.

Ashley Mosuro almost 6 years ago

Totally agree, seems like a more user friendly approach. I've just had a go and quite surprised how simple it is to implement. Will take this approach going forward.

I do think that top bar issues needs to be looked at though. Devs should have the ability to decide whether users can access the parent items or not. Seems like the framework is forcing us to do it a certain way.

Love the work guys, well done and thank you!

banacan almost 6 years ago

I thought this issue was resolved long ago. This was a problem way back in F 3.2.5 and one that I commented on quite a bit. I even offered a suggestion on GitHub for a fix, which, as far as I knew, was implemented. I can't believe that we have to go through this all over again!

Guy Van Bael almost 6 years ago

Try adding this to your nav class top-bar.. this... it works with F4

data-options="mobile_show_parent_link: true"

Gareth Cooper almost 6 years ago

Guy, you're a star!

I've been struggling with this for ages and now notice it's even mentioned at the bottom of the top-bar documentation page! Doh!

Marc McGee almost 6 years ago

Thank you Guy! Super helpful.

Alvar Sirlin almost 6 years ago

Worth noting that the active class is not applied to the added link when it should.

If you are using wordpress, this code will add it:
Javascript
$('.current-menu-item').find('ul li:nth-child(2)').addClass('active');

This is only tested on a first level dropdown.

I'm not sure Foundation alone gives the classes necessary to distinguish an active page from an active parent.

Gavin Stokes over 5 years ago

I'm still having issues with this. I have tried adding both speratley

data-options="mobile_show_parent_link: true"
data-options="is_hover: false"

Neither fixed the issue. A user is unable to to click the root of a menu item which has sub items once the menu has been resized to fit smaller mobile screens.

Mark Szymanski over 5 years ago

Using 5.2.3 and having this same problem.

ex at http://koovay.com/Champion/

I guess I'll migrate it over to the off-canvas if no fix?

Martin Güthler over 5 years ago

Try adding this:

$('li.has-dropdown').each(function(){
  link=($(this)[0].children[0].outerHTML);
  ul=$(this).find($('ul'))
  ul.children().children().first().parent().before('<li class="parentlink">'+link+'</li>')
});

to the bottom of your Javascript (after foundation is initialized). Then, add the follwing to your CSS into the media-query where the mobile-menu ist not used:

.parentlink {
  display: none !important;
}

banacan about 5 years ago

I'm using F 5.4.7 and I set my mobile menu to display below $large-up. My problem was that I wanted the parent links to be visable and clickable at the same breakpoint. What I found was that the parent links were only visible in the sub-menu when the screen size was 560px. So in topbar.js, I changed line 368 from show-for-small to show-for-medium, now it works just as I wanted.

It's too bad that topbar.js doesn't take my breakpoint and media query settings and use them to add the applicable css class. If it did, I wouldn't have to customize topbar.js – never a good idea when using a framework, at least not in my opinion. Maybe Zurb will add that capability to a future release.