From 5e155600e3f04ee5b7cb0db1806b5d4d0955fe33 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Tue, 2 Apr 2024 17:18:05 +0300 Subject: [PATCH] fix: long menu items with toggle overlap Closes: #4226 --- e2e-tests/specs/customizer/hfg/hfg-menu-item-wrap.spec.ts | 6 ++++++ inc/views/nav_walker.php | 2 +- 2 files changed, 7 insertions(+), 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 index f413e7ea42..7132e6a303 100644 --- 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 index 7c37e6fb6e..801e54c5d7 100644 --- 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 ); }