Hey @jontld,
1. With Sub Menu Trigger set to Indicator, should the parent label navigate to its page on mobile? If so, what would stop it working here?
Yes. When the Sub Menu Trigger is set to Indicator (or “Sub Indicator”), the parent label text is designed to act as a standard link that navigates to the assigned page when tapped, while only the indicator icon (the arrow) triggers the submenu toggle.
What would stop it working:
-
Target Area Overlapping (CSS Flex/Absolute positioning): The tap target area (
.x-anchor-sub-indicator) can often stretch or overlap the text label of the parent menu item. On mobile, this makes the browser register taps on the label text as taps on the indicator, triggering the toggle instead of navigation.
-
Mobile Browser Touch Simulation (iOS simulated hover): iOS/Safari handles links containing child elements or hover interactions by simulating a hover on the first tap (which triggers the toggle script) and only navigating on the second tap.
-
Outdated Cornerstone Style Cache: Cornerstone caches element outputs and styles. If this cache is stale, the setting change might not be pushed to the live front-end.
-
Mismatched Header/Element Instances: If you have duplicate mobile headers (e.g. separate setups for landscape/portrait or a hidden element/bar), you might have changed the trigger setting on an element that isn’t the one rendering on the specific mobile screen size you tested.
2. Is there a recommended setting/markup so the label navigates and only the indicator toggles the submenu?
The native and recommended setting is indeed Sub Menu Trigger: Indicator (which translates to sub-indicator in the code, applying the data-x-toggle-nested-trigger attribute to the indicator tag).
If this setting is configured but fails on mobile, use the following workarounds to enforce the behavior:
A. Clear Cornerstone’s Internal Cache
Go to Cornerstone > Settings > System in the WordPress admin panel and click Clear Style Cache.
B. CSS Adjustment to Prevent Target Area Overlap
The following suggestion involves custom coding. Please note that custom codes suggested below only serves as a guide. We cannot support issues that might result from the use of it nor can we improve the code further. If you need support for this, you can sign up to our One service.
Apply this CSS in the Element CSS area of your Navigation Collapsed element to make sure the indicator’s click target does not overlap the label:
/* Ensure the parent anchor operates in a relative context */
$el.x-menu > li.menu-item-has-children > .x-anchor {
position: relative;
}
/* Ensure the text label can receive tap events */
$el.x-menu > li.menu-item-has-children > .x-anchor .x-anchor-text {
pointer-events: auto;
position: relative;
z-index: 1;
}
/* Isolate the indicator hit target */
$el.x-menu > li.menu-item-has-children > .x-anchor .x-anchor-sub-indicator {
pointer-events: auto;
position: relative;
z-index: 2;
padding: 10px 15px; /* Safely increase indicator touch area without overlapping */
}
C. JavaScript Enforcer Override
If the native touch-events are still blocking navigation on mobile, you can add a short enforcer script under Cornerstone > Header Editor > JS:
jQuery(document).ready(function($) {
$('.x-menu-collapsed .menu-item-has-children > a').on('click touchend', function(e) {
// Navigate ONLY if the touch target is NOT the indicator icon
if (!$(e.target).closest('.x-anchor-sub-indicator').length) {
var href = $(this).attr('href');
if (href && href !== '#') {
window.location.href = href;
}
}
});
});
3. Why might a newly-added child item not render in the collapsed submenu when the existing children do?
This is commonly caused by:
-
PHP Variable Input Limit (max_input_vars):
WordPress menus with many nested children can easily exceed PHP’s default input variables limit (usually set to 1000). If this limit is hit when you click “Save Menu” in WordPress, any newly added items or nested child elements are quietly discarded by the server and never saved.
-
Verify: Reload the Appearance > Menus page in WP admin and check if the 6th child item is still there.
-
Fix: Increase this value in your server’s
php.ini or .htaccess file:max_input_vars = 3000
-
Menu Cache & Transients:
Cornerstone, caching plugins (like WP Rocket, LiteSpeed, or SG Optimizer), and CDN caches store the static rendered HTML of menus. When you add a menu item in WordPress, the old HTML version is often served on mobile until the HTML cache is explicitly purged.
-
Fix: Purge the caches in your optimization plugins, clear the style cache in Cornerstone > Settings > System, and purge any server object caches (Redis/Memcached).
-
Wrong Menu Selection in Header Builder:
The Navigation Collapsed element might be targeting a specific menu name or custom menu location instead of the standard “Primary” menu. If you have duplicate menus (e.g. “Header Menu” vs “Mobile Menu”), you might have added the child item to the wrong menu list.
-
Fix: Check the settings inside your Navigation Collapsed element to confirm the exact Menu it is set to display.
-
CSS Height / Clipping Limits:
If you have a custom height limit or overflow: hidden set on your sub-menu container or mobile sidebar bar, the 6th item may be loading in the HTML source but clipped off the screen.
-
Fix: Inspect the mobile menu elements in your browser’s Developer Tools to see if the element is present in the DOM but hidden.