Comments on: wd_s Goes Vegetarian: Dropping the Hamburger Navigation Menu

By: Chris

Chris — Tue, 03 Apr 2018 19:54:35 +0000

Thank you for the great article & for making the fork of wd_s available. I downloaded the code from Github & modified it for my site. If you’d like to see it “in the wild”, it’s at https://mercury.photo. Suggestions for improvement welcome.

By: Chris

Chris — Fri, 12 Aug 2016 16:59:03 +0000

Having not got a response for the z-index problem above, I was able to fix it by raising the z-index on `.menu.dropdown.mobile-nav .visible > .sub-menu` to 1. You’ll have to raise the z-index on the close button to 2 if you implement this.

But I’ve discovered a second issue: any sub-menu item with children does not have the expected behavior. Instead, clicking closes the overlay. I’ve traced it to this bit of JavaScript:

` that.removeMenuClasses = function() {

// Remove any instances of classes already in place
// This makes sure we can click to switch between submenus
$( ‘body’ ).removeClass( ‘mobile-menu-more sub-menu-more’ );
that.$c.mobileNavMenuContainer.removeClass( ‘more’ );
$( ‘.menu-item-has-children’ ).removeClass( ‘visible’ );
}`

When you click a link with children as noted above, the “visible” class toggles and the menu closes.

By: Chris

Chris — Thu, 04 Aug 2016 19:57:46 +0000

“Moving the via e.g., top:5rem seems to fix it,” SHOULD read “Moving the unordered list via (e.g.,) top:5rem seems to fix it,”

By: Chris

Chris — Thu, 04 Aug 2016 19:56:20 +0000

I’m trying to implement this on a plain-vanilla install of WordPress using the Twenty Sixteen theme, as proof of concept. The -1 z-index on .mobile-nav-menu.more .mobile-nav-menu-hidden seems to prevent clicking on the last one or 2 items when a “more” menu is displayed. Moving the via e.g., top:5rem seems to fix it, as does changing the z-index to a higher number (but that breaks some other stuff). I’m trying to understand what might be causing this behavior. Any thoughts?

It’s currently a local install, but I could put it on a live server if you need to see it in action.

By: Corey Collins

Corey Collins — Thu, 18 Feb 2016 13:18:10 +0000

In reply to Patty. Thanks for the feedback! We can definitely look into that and see what adjustments may need to be made on our end.

By: Patty

Patty — Wed, 17 Feb 2016 17:07:30 +0000

This is interesting stuff and I appreciate the post. But with all this talk of usability, I want to point out that the extremely-light-grey color of your body text is very hard to read. I would have read the whole article, but it was just too much eyestrain..

By: Cameron Campbell

Cameron Campbell — Mon, 15 Feb 2016 19:26:38 +0000

In reply to Christina. Any pattern can be annoying if implemented poorly. Facebook, Instagram, Twitter, and most every major app these days is using a similar “always present” navigation pattern to great effect on their mobile sites/apps.

By: Corey Collins

Corey Collins — Sat, 13 Feb 2016 13:30:54 +0000

In reply to Alex.

Alex – since this post went up, we’ve done some tweaking based on some internal feedback and have actually moved the entire menu a decent amount. Rather than sliding in and sitting in the top left corner, the menu items in the overlay now sit in the bottom right corner so they are closer to your thumb (if you’re a righty).

Doing this not only means the user has to move their thumb less, but the close button will always sit directly above the menu items.

By: Corey Collins

Corey Collins — Sat, 13 Feb 2016 13:28:31 +0000

In reply to Dave Warfel. Great insights, Dave!

By: Corey Collins

Corey Collins — Sat, 13 Feb 2016 13:27:50 +0000

In reply to Christina. Everyone is obviously entitled to their own opinion. The reason we haven't implemented it yet is because we're putting it through our own internal testing before making it a part of core wd_s. We wouldn't push something live when it hasn't been thoroughly tested first. That's when things begin to break and truly become annoying for all users.