Merge pull request #2538 from thexmanxyz/feature/disable-menu-mobile

Disable menu with CSS on mobile devices

engines/common/nucleus/particles/menu.html.twig

@@ -131,7 +131,7 @@
 {% import _self as macro %}
 
 {% if menu.root.count() %}
-<nav class="g-main-nav" role="navigation"{{ particle.mobileTarget ? ' data-g-mobile-target' : '' }} data-g-hover-expand="{{ particle.hoverExpand|default('true') ? 'true': 'false' }}">
+<nav class="g-main-nav{{ particle.disableMobile ? ' g-hide-mobile' : '' }}" role="navigation"{{ particle.mobileTarget ? ' data-g-mobile-target' : '' }} data-g-hover-expand="{{ particle.hoverExpand|default('true') ? 'true': 'false' }}">
     <ul class="g-toplevel">
         {{ macro.displayItems(menu.root, menu, _context) }}
     </ul>

engines/wordpress/nucleus/particles/menu.yaml

@@ -70,3 +70,9 @@ form:
       label: Force Target Attribute
       description: 'Adds ''target="_self"'' attribute to all menu items. Fixes an issue with pinned tabs in Firefox where external links always open in a new tab.'
       default: 0
+
+    disableMobile:
+      type: input.checkbox
+      label: Disable on Mobile
+      description: Check this field to completely disable the menu on mobile devices. This prevents menu flickering but you might end with no menu when JS is not supported by the respective device. 
+      default: 0

themes/hydrogen/common/scss/hydrogen/_nav.scss

@@ -93,6 +93,13 @@
 	}
 }
 
+.g-main-nav.g-hide-mobile{
+    @include breakpoint(mobile-only) {
+        display: none;
+        visibility: hidden;
+    }
+}
+
 #g-navigation, #g-header {
 	.align-left {
 		.g-toplevel {