Currently on mobile, clicking the menu button to pop-out the menu is
quite difficult due to the small touch target by the "icon-menu" span.
This changes the click target to be the div parent of that span, and
uses padding (which has touch events) rather than margin which is
outside the touch area in the box-model.
Additionally, fixes the bottom-padding on the nav-item which was
interfering with navigation elements below it.
This padding on the nav-item once affected the menu button (on the left in
mobile) AND the bottom of the nav menu links on the right (in desktop view).
Now that the header is no longer used in this theme, the left menu button in
mobile is the only place this padding is observed and it has a negative
side-effect (since padding receives touch events in the box model) of blocking
touch events to the sidebar menu items.
This removes it and overall makes the menu clickable in mobile again.
Currently on mobile, clicking the menu button to pop-out the menu is quite difficult due to the small touch target by the "icon-menu" span.
This changes the click target to be the
divparent of thatspan, and usespadding(which has touch events) rather thanmarginwhich is outside the touch area in the box-model.Additionally, fixes the bottom-padding on the
nav-itemwhich was interfering with navigation elements below it.This padding on the
nav-itemonce affected the menu button (on the left in mobile) AND the bottom of the nav menu links on the right (in desktop view).Now that the header is no longer used in this theme, the left menu button in mobile is the only place this padding is observed and it has a negative side-effect (since padding receives touch events in the box model) of blocking touch events to the sidebar menu items.
This removes it and overall makes the menu clickable in mobile again.
Closes https://github.com/meteor/hexo-theme-meteor/issues/35.