Menu icon Foundation
Mobile Top Bar - Show Child Links?

Currently, the top-bar uses a "multi-level" type menu to display child links. However, I would like to achieve something similar to the photo below - but can't figure out what piece of code causes the menu ti hide the child elements.

Any ideas?

Mobile topbar

topbarcustom top-bar

Currently, the top-bar uses a "multi-level" type menu to display child links. However, I would like to achieve something similar to the photo below - but can't figure out what piece of code causes the menu ti hide the child elements.

Any ideas?

Mobile topbar
Samantha Gray over 4 years ago

I see that this post is several months old, but since I don't see a fix in jointsWP (please correct me if I'm wrong) I figured I'd reply with what I came up with.

Instead of messing with whether or not to show parent links (this looks ugly and makes the user click the menu item twice to get to the page of the parent link! ) I really wanted my mobile menu to simply expand any nested links. I did it all with css and defined it for my mobile/tablet breakpoints only. So far, it's working beautifully. I'd be interested to know what your thoughts are on this...

/*shorten up each menu item*/
  .menu-item a {
    line-height: 1rem !important;
  }
    /*get rid of the back text (although, I think this could be done using data-options on the topbar*/
  li.title.back.js-generated{
    display: none;
  }
    /*Overwrite a couple of the existing css rules to move the child links into view, under each parent link*/
  .top-bar-section .dropdown {
    position: relative !important;
    left: 0;
    height: auto;
    width: auto;
  }

Samantha Gray over 4 years ago

One more thing, in order to make the parent link clickable, without showing the parent link, you have to be able to remove the class 'has-dropdown' at your mobile/tablet breakpoint. Still tweaking this...I'm pretty sure I can be more specific, so that if the window is resized back up I can re-add the appropriate class, but so far, this is working, although somewhat in-elegantly:
```Javascript
//Detect breakpoint, remove class has-dropdown for mobile
var $window = $(window),
$li = $('li');

function resize() {
if ($window.width() < 639) {
return $li.removeClass('has-dropdown');
}
}

$window
.resize(resize)
.trigger('resize');
```

Rafi Benkual over 4 years ago

That's a good option. I know people have asked how to skip right to the sub nav.

Here is a solution to expand the dropdown like an accordion. Some CSS can be added to indent the sub menu items and change the arrow: http://codepen.io/rafibomb/pen/rVzzOj

Jeremy Englert over 4 years ago

Woah, these are awesome solutions. I ended up using jQuery to get a similar effect, but I love the CSS approach.

Samantha Gray over 4 years ago

Hm, that accordion is pretty snazzy. I'm going to play around with that a bit.

Jeremy, as you can see, I ended up needing to add a few lines of js to make my solution work... I just wish it were a little bit more elegant.
If you don't mind sharing, I'd be interested to know what you jQuery'd (yes, I made "jQuery" a verb right there. It's a skill I have). I see that jointsWP3 is out now, should I be digging through it to see what you're talking about? :)

Jeremy Englert over 4 years ago

It's not in JointsWP, but that's an interesting thought. It would be pretty easy to create a separate navigation partial that could be called if a user wanted to use this type of menu.

My "solution" to this problem involved tearing up the topbar.js file that comes with Foundation to remove all of the parts that caused the "multi-level" navigation. Then I wrote a couple lines of CSS and jQuery to hide/show child elements when the parent element was clicked.

You can see it in action here: http://manning-murray.com/

The solutions you and Rafi came up with seem much better as they don't involve modifying any of the core Foundation files.