fix: long menu items with toggle overlap

Closes: #4226
Codeinwp · Apr 2, 2024 · 5e15560 · 5e15560
1 parent ce27186
commit 5e15560
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/e2e-tests/specs/customizer/hfg/hfg-menu-item-wrap.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-menu-item-wrap.spec.ts
@@ -27,5 +27,11 @@ test.describe('Menu item alignment', function () {
 			.getByRole('link', {
 				name: 'Level 3b',
 			});
+
+		// Check that a toggle menu has proper padding.
+		const toggleItemLink = page.getByRole('link', {
+			name: 'About The Tests',
+		});
+		await expect(toggleItemLink).toHaveCSS('padding-right', '46px');
 	});
 });
diff --git a/inc/views/nav_walker.php b/inc/views/nav_walker.php
@@ -210,7 +210,7 @@ public function get_mobile_caret_style() {
 		$mobile_button_caret_css .= '.header-menu-sidebar .nav-ul li .wrap a .dd-title { width: var(--wrapdropdownwidth); }';
 		$mobile_button_caret_css .= '.header-menu-sidebar .nav-ul li .wrap button { border: 0; z-index: 1; background: 0; }';
 		$mobile_button_caret_css .= '.header-menu-sidebar .nav-ul li:not([class*=block]):not(.menu-item-has-children) > .wrap > a { padding-right: calc(1em + (18px*2)); text-wrap: wrap; white-space: normal;}';
-		$mobile_button_caret_css .= '.header-menu-sidebar .nav-ul li.menu-item-has-children:not([class*=block])  > .wrap > a { margin-right: calc(-1em - (18px*2));}';
+		$mobile_button_caret_css .= '.header-menu-sidebar .nav-ul li.menu-item-has-children:not([class*=block])  > .wrap > a { margin-right: calc(-1em - (18px*2)); padding-right: 46px;}';
 
 		return Dynamic_Css::minify_css( $mobile_button_caret_css );
 	}