From bd6b0979b5ae8705b85e670fd42b16901d5ee43b Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Tue, 19 May 2026 12:20:45 +0200 Subject: [PATCH 01/13] Improve consistency of width on some internal pages --- themes/cp_theme_d10/css/page.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/themes/cp_theme_d10/css/page.css b/themes/cp_theme_d10/css/page.css index d8fe0b8..fb43894 100644 --- a/themes/cp_theme_d10/css/page.css +++ b/themes/cp_theme_d10/css/page.css @@ -390,6 +390,8 @@ iframe { .cp_event #page .page-content, .system-404 .page-content, .system-403 .page-content, +.path-user .page-content, +.layout-builder-overrides-node-discard-changes .page-content, .cp-search-search-results-page #page .page-content { max-width: 70.5rem; margin-left: auto; @@ -415,8 +417,7 @@ iframe { .node-add-page .page-content, .view-data-products-page-1 #page .page-content, .fluxes_volume .page-content .block:not(.block-system-main-block), -.fluxes_volume .page-content .layout--normal, -.path-user #page .page-content { +.fluxes_volume .page-content .layout--normal { max-width: 1400px; margin-left: auto; margin-right: auto; From 0a2c0a868a5869b2c1cb1115381ed62e336728b5 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Tue, 19 May 2026 12:21:08 +0200 Subject: [PATCH 02/13] Add margin-top to admin tabs --- .../block/block--local-tasks-block.html.twig | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig diff --git a/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig b/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig new file mode 100644 index 0000000..b30a685 --- /dev/null +++ b/themes/cp_theme_d10/templates/block/block--local-tasks-block.html.twig @@ -0,0 +1,13 @@ +{# extends @bootstrap/layout/block.html.twig +/** + * @file + * Theme override for tabs. + */ +#} +{% block content %} + {% if content %} + + {% endif %} +{% endblock %} From a397f2bdfad1cb50071a613557081201124646f4 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Tue, 19 May 2026 12:21:48 +0200 Subject: [PATCH 03/13] Bug fix: disable toggling of menu open/close when not in mobile menu view --- themes/cp_theme_d10/js/global.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/themes/cp_theme_d10/js/global.js b/themes/cp_theme_d10/js/global.js index e9772cc..f76cfe0 100644 --- a/themes/cp_theme_d10/js/global.js +++ b/themes/cp_theme_d10/js/global.js @@ -11,13 +11,17 @@ once('cp_theme_d10', '#cp_theme_d10_menu .top-node .drop-down-toggle').forEach(function (el) { el.addEventListener('click', function (event) { let target = el.closest(".top-node"); - target.classList.toggle("open"); + if (window.innerWidth < 992) { + target.classList.toggle("open"); + } event.preventDefault(); }); el.addEventListener('keyup', function (event) { if(event.key === "Enter") { let target = el.closest(".top-node"); - target.classList.toggle("open"); + if (window.innerWidth < 992) { + target.classList.toggle("open"); + } event.preventDefault(); } }); From 5356b4c63da7239d5a46bf94cab77361935cad54 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Tue, 19 May 2026 12:23:03 +0200 Subject: [PATCH 04/13] Re-enable box shadow on dropdown menu --- themes/cp_theme_d10/css/menu.css | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 94200f4..0423acb 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -96,7 +96,6 @@ .top-node .dropdown-menu { left: 0; - box-shadow: none; width: 100%; padding-left: 1rem; padding-right: 1rem; From 1da5a4c0fe7ab1efd24dedab6954983f7d6cf604 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Tue, 19 May 2026 12:23:51 +0200 Subject: [PATCH 05/13] Add menu hover delay and transition styling --- themes/cp_theme_d10/css/menu.css | 44 ++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 0423acb..3b783c4 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -91,17 +91,52 @@ .top-node:hover .dropdown-menu, .top-node:focus-within .dropdown-menu { display: flex; - flex-wrap: none; + flex-wrap: nowrap; + visibility: visible; + max-height: 400px; + padding-top: 1rem !important; + padding-bottom: 1.5rem !important; + transition: visibility 0s 0.3s, + max-height 0.3s ease-out 0.3s, + padding-bottom 0.3s ease-out 0.3s, + padding-top 0.15s ease-out 0.3s; + + &>div { + opacity: 1; + transition: opacity 0.3s linear 0.3s; + } } .top-node .dropdown-menu { + /*left: 0; + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + + &>div { + width: 19%; + } */ + + display: flex; + flex-wrap: nowrap; left: 0; + overflow: clip; width: 100%; padding-left: 1rem; padding-right: 1rem; + padding-top: 0 !important; + padding-bottom: 0 !important; + visibility: hidden; + max-height: 0; + transition: visibility 0s 0.2s, + max-height 0.1s ease-out 0.1s, + padding-bottom 0.1s ease-out 0.1s, + padding-top 0.05s ease-out 0.15s; &>div { width: 19%; + opacity: 0; + transition: opacity 0.1s linear 0.1s; } } } @@ -117,13 +152,6 @@ } #cp_theme_d10_menu { - .top-node:hover .dropdown-menu, - .top-node:focus-within .dropdown-menu { - &>div { - width: 316px; - } - } - .top-node .dropdown-menu { padding-left: calc((100% - 1400px)/2 + 1rem); padding-right: calc((100% - 1400px)/2 + 1rem); From b5e41f963b86297fa265226056f429f42c06e5a3 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Thu, 21 May 2026 12:10:52 +0200 Subject: [PATCH 06/13] Remove leftover comment, add general webforms for width fix --- themes/cp_theme_d10/css/menu.css | 9 --------- themes/cp_theme_d10/css/page.css | 1 + 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 3b783c4..24de45d 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -108,15 +108,6 @@ } .top-node .dropdown-menu { - /*left: 0; - width: 100%; - padding-left: 1rem; - padding-right: 1rem; - - &>div { - width: 19%; - } */ - display: flex; flex-wrap: nowrap; left: 0; diff --git a/themes/cp_theme_d10/css/page.css b/themes/cp_theme_d10/css/page.css index fb43894..9b3ddf0 100644 --- a/themes/cp_theme_d10/css/page.css +++ b/themes/cp_theme_d10/css/page.css @@ -383,6 +383,7 @@ iframe { /* "Narrow" pages -- all content narrow (70.5rem) */ .fluxes_article .page-content, +.path-webform .page-content, .webform #page .page-content, .entity-webform-canonical #page .page-content, .entity-webform-confirmation #page .page-content, From 4cbdcd04b1c82a2fe1383332fd3f8ce5743718a5 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Fri, 22 May 2026 09:51:56 +0200 Subject: [PATCH 07/13] Remove menu changes to start new menu structure --- themes/cp_theme_d10/css/menu.css | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 24de45d..c5addd3 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -92,42 +92,16 @@ .top-node:focus-within .dropdown-menu { display: flex; flex-wrap: nowrap; - visibility: visible; - max-height: 400px; - padding-top: 1rem !important; - padding-bottom: 1.5rem !important; - transition: visibility 0s 0.3s, - max-height 0.3s ease-out 0.3s, - padding-bottom 0.3s ease-out 0.3s, - padding-top 0.15s ease-out 0.3s; - - &>div { - opacity: 1; - transition: opacity 0.3s linear 0.3s; - } } .top-node .dropdown-menu { - display: flex; - flex-wrap: nowrap; left: 0; - overflow: clip; width: 100%; padding-left: 1rem; padding-right: 1rem; - padding-top: 0 !important; - padding-bottom: 0 !important; - visibility: hidden; - max-height: 0; - transition: visibility 0s 0.2s, - max-height 0.1s ease-out 0.1s, - padding-bottom 0.1s ease-out 0.1s, - padding-top 0.05s ease-out 0.15s; &>div { width: 19%; - opacity: 0; - transition: opacity 0.1s linear 0.1s; } } } From 834d1431d65a673b229703cd0d02f96ddcad531e Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Fri, 22 May 2026 16:21:01 +0200 Subject: [PATCH 08/13] WIP First start of menu backdrop --- themes/cp_theme_d10/css/menu.css | 15 +++++++++++++++ .../templates/navigation/menu--main.html.twig | 3 +-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index c5addd3..4725fc8 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -78,6 +78,10 @@ .menu-level-3 { padding-left: 2rem; } + + .menu-backdrop { + display: none; + } } } @@ -104,6 +108,17 @@ width: 19%; } } + + .menu-backdrop { + z-index: 8; + position: absolute; + top: 38.5px; + left: 0; + width: 100vw; + background: white; + box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; + transition: height 0.2s 0.1s; + } } } diff --git a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig index 548b37b..9a504dd 100644 --- a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig +++ b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig @@ -114,11 +114,10 @@ {% endfor %} {% if menu_level == 0 %} {# .navbar-nav #} +
{# #cp_theme_d10_menu #} {% elseif menu_level <= 1 %} {# .dropdown-menu #} {% endif %} - {% if menu_level == 0 %} - {% endif %} {% endif %} {% endmacro %} From 0d1cc7c7431ea1ffcce36b432a3a1dc5a8324f8a Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Mon, 25 May 2026 09:48:49 +0200 Subject: [PATCH 09/13] WIP Basic working backdrop --- themes/cp_theme_d10/css/menu.css | 3 ++ themes/cp_theme_d10/js/global.js | 32 +++++++++++++++++++ .../templates/navigation/menu--main.html.twig | 2 +- 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 4725fc8..7fd439f 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -103,6 +103,9 @@ width: 100%; padding-left: 1rem; padding-right: 1rem; + background: none; + box-shadow: none; + border: 0; &>div { width: 19%; diff --git a/themes/cp_theme_d10/js/global.js b/themes/cp_theme_d10/js/global.js index f76cfe0..d65c011 100644 --- a/themes/cp_theme_d10/js/global.js +++ b/themes/cp_theme_d10/js/global.js @@ -26,6 +26,38 @@ } }); }); + const menuBackdrop = document.querySelector(".menu-backdrop"); + function whenEntered(topNode) { + let height = topNode.dataset.computedHeight; + if (!height) { + const dropdown = topNode.querySelector(':scope > .dropdown-menu'); + height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px'; + topNode.dataset.computedHeight = height; + } + menuBackdrop.style.height = height; + } + + function whenExited(topNode) { // I might not need topNode here, but leave for now + menuBackdrop.style.height = "0px"; + } + once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) { + + el.addEventListener('mouseover', function (event) { + whenEntered(el); + }); + el.addEventListener('focusin', function (event) { + whenEntered(el); + }); + + el.addEventListener('mouseleave', function (event) { + whenExited(el); + }); + el.addEventListener('focusout', function (event) { + if (!el.contains(event.relatedTarget)) { + whenExited(el); + } + }); + }); once('cp_theme_d10', '#cp_theme_d10_menu').forEach(function (el) { el.addEventListener('mouseout', function (event) { if (event.target === document.activeElement) { diff --git a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig index 9a504dd..847c32d 100644 --- a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig +++ b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig @@ -56,7 +56,7 @@
{% elseif menu_level == 1 %} -
+
{% endif %} {% for item in items %} {% set item_classes = [ From 98c2aa63cecf0bd19d100d6fb388902c0b6d4eda Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Mon, 25 May 2026 11:03:57 +0200 Subject: [PATCH 10/13] WIP add opacity and visibility transitions --- themes/cp_theme_d10/css/menu.css | 14 ++++++++++---- .../templates/navigation/menu--main.html.twig | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 7fd439f..3bcd27a 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -94,11 +94,14 @@ #cp_theme_d10_menu { .top-node:hover .dropdown-menu, .top-node:focus-within .dropdown-menu { - display: flex; - flex-wrap: nowrap; + opacity: 1; + visibility: visible; + transition: visibility 0s 0.5s, opacity 0.5s 0.5s; } .top-node .dropdown-menu { + display: flex; + flex-wrap: nowrap; left: 0; width: 100%; padding-left: 1rem; @@ -106,6 +109,9 @@ background: none; box-shadow: none; border: 0; + visibility: hidden; + opacity: 0; + transition: visibility 0s 0.5s, opacity 0.5s 0s; &>div { width: 19%; @@ -118,12 +124,12 @@ top: 38.5px; left: 0; width: 100vw; + height: 0px; background: white; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; - transition: height 0.2s 0.1s; + transition: height 0.5s 0.5s; } } - } /* Bootstrap XXL breakpoint */ diff --git a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig index 847c32d..2bc0626 100644 --- a/themes/cp_theme_d10/templates/navigation/menu--main.html.twig +++ b/themes/cp_theme_d10/templates/navigation/menu--main.html.twig @@ -114,7 +114,7 @@ {% endfor %} {% if menu_level == 0 %}
{# .navbar-nav #} -
+
{# #cp_theme_d10_menu #} {% elseif menu_level <= 1 %}
{# .dropdown-menu #} From 5ef9c19348c6c1117eda8367ff55b6c0337a8a49 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Mon, 25 May 2026 11:25:46 +0200 Subject: [PATCH 11/13] WIP improve transitions slightly --- themes/cp_theme_d10/css/menu.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index 3bcd27a..fdfda4a 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -96,7 +96,8 @@ .top-node:focus-within .dropdown-menu { opacity: 1; visibility: visible; - transition: visibility 0s 0.5s, opacity 0.5s 0.5s; + transform: translateY(0); + transition: visibility 0s 0.2s, opacity 0.2s ease-out 0.2s, transform 0.2s ease-out 0.2s; } .top-node .dropdown-menu { @@ -111,7 +112,8 @@ border: 0; visibility: hidden; opacity: 0; - transition: visibility 0s 0.5s, opacity 0.5s 0s; + transform: translateY(-6px); + transition: opacity 0.15s ease-in, visibility 0s 0.15s, transform 0.15s ease-in; &>div { width: 19%; @@ -124,10 +126,9 @@ top: 38.5px; left: 0; width: 100vw; - height: 0px; background: white; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; - transition: height 0.5s 0.5s; + transition: height 0.15s ease-in 0.2s; } } } From a000f6581eb4cb587ef9d317a6e2996f774381cd Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Mon, 25 May 2026 12:53:34 +0200 Subject: [PATCH 12/13] WIP controlling hover appearance via JS --- themes/cp_theme_d10/css/menu.css | 12 +----- themes/cp_theme_d10/js/global.js | 73 ++++++++++++++++++++++++++------ 2 files changed, 62 insertions(+), 23 deletions(-) diff --git a/themes/cp_theme_d10/css/menu.css b/themes/cp_theme_d10/css/menu.css index fdfda4a..2925bc6 100644 --- a/themes/cp_theme_d10/css/menu.css +++ b/themes/cp_theme_d10/css/menu.css @@ -92,14 +92,6 @@ } #cp_theme_d10_menu { - .top-node:hover .dropdown-menu, - .top-node:focus-within .dropdown-menu { - opacity: 1; - visibility: visible; - transform: translateY(0); - transition: visibility 0s 0.2s, opacity 0.2s ease-out 0.2s, transform 0.2s ease-out 0.2s; - } - .top-node .dropdown-menu { display: flex; flex-wrap: nowrap; @@ -113,7 +105,7 @@ visibility: hidden; opacity: 0; transform: translateY(-6px); - transition: opacity 0.15s ease-in, visibility 0s 0.15s, transform 0.15s ease-in; + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; &>div { width: 19%; @@ -128,7 +120,7 @@ width: 100vw; background: white; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px; - transition: height 0.15s ease-in 0.2s; + transition: height 0.2s ease-in-out; } } } diff --git a/themes/cp_theme_d10/js/global.js b/themes/cp_theme_d10/js/global.js index d65c011..8a830f8 100644 --- a/themes/cp_theme_d10/js/global.js +++ b/themes/cp_theme_d10/js/global.js @@ -27,34 +27,81 @@ }); }); const menuBackdrop = document.querySelector(".menu-backdrop"); - function whenEntered(topNode) { + if (!menuBackdrop) { return; } + + let committedTopNode = null; + let dwellTimer = null; + let closeTimer = null; + let switchTimer = null; + const DWELL_TIME = 200; + const CLOSE_GRACE = 100; + const SWITCH_DELAY = 160; + + function revealDropdown(topNode) { + if (committedTopNode !== topNode) { return; } + const dropdown = topNode.querySelector(':scope > .dropdown-menu'); + if (dropdown) { + dropdown.style.visibility = 'visible'; + dropdown.style.opacity = '1'; + dropdown.style.transform = 'translateY(0)'; + } let height = topNode.dataset.computedHeight; if (!height) { - const dropdown = topNode.querySelector(':scope > .dropdown-menu'); height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px'; topNode.dataset.computedHeight = height; } menuBackdrop.style.height = height; } - function whenExited(topNode) { // I might not need topNode here, but leave for now - menuBackdrop.style.height = "0px"; + function showDropdown(topNode) { + clearTimeout(closeTimer); + clearTimeout(switchTimer); + const prev = committedTopNode; + committedTopNode = topNode; + if (prev && prev !== topNode) { + hideDropdown(prev); + switchTimer = setTimeout(function () { revealDropdown(topNode); }, SWITCH_DELAY); + } else { + revealDropdown(topNode); + } + } + + function hideDropdown(topNode) { + const dropdown = topNode.querySelector(':scope > .dropdown-menu'); + if (!dropdown) { return; } + dropdown.style.opacity = ''; + dropdown.style.transform = ''; + setTimeout(function () { dropdown.style.visibility = ''; }, 200); } - once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) { - el.addEventListener('mouseover', function (event) { - whenEntered(el); + function closeMenu() { + if (committedTopNode) { + hideDropdown(committedTopNode); + committedTopNode = null; + } + menuBackdrop.style.height = '0px'; + } + + once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) { + el.addEventListener('mouseenter', function () { + clearTimeout(closeTimer); + dwellTimer = setTimeout(function () { showDropdown(el); }, DWELL_TIME); }); - el.addEventListener('focusin', function (event) { - whenEntered(el); + + el.addEventListener('mouseleave', function () { + clearTimeout(dwellTimer); + closeTimer = setTimeout(closeMenu, CLOSE_GRACE); }); - el.addEventListener('mouseleave', function (event) { - whenExited(el); + el.addEventListener('focusin', function () { + clearTimeout(dwellTimer); + clearTimeout(closeTimer); + showDropdown(el); }); + el.addEventListener('focusout', function (event) { - if (!el.contains(event.relatedTarget)) { - whenExited(el); + if (!el.contains(event.relatedTarget) && committedTopNode === el) { + closeMenu(); } }); }); From 4278ecae572f2a240b2ed77b0717132e0b97df20 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Mon, 25 May 2026 13:33:18 +0200 Subject: [PATCH 13/13] Ensure mobile layout does not conflict --- themes/cp_theme_d10/js/global.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/themes/cp_theme_d10/js/global.js b/themes/cp_theme_d10/js/global.js index 8a830f8..77b2eeb 100644 --- a/themes/cp_theme_d10/js/global.js +++ b/themes/cp_theme_d10/js/global.js @@ -27,7 +27,9 @@ }); }); const menuBackdrop = document.querySelector(".menu-backdrop"); - if (!menuBackdrop) { return; } + if (!menuBackdrop) { + return; + } let committedTopNode = null; let dwellTimer = null; @@ -45,11 +47,7 @@ dropdown.style.opacity = '1'; dropdown.style.transform = 'translateY(0)'; } - let height = topNode.dataset.computedHeight; - if (!height) { - height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px'; - topNode.dataset.computedHeight = height; - } + const height = (dropdown ? dropdown.offsetHeight : topNode.offsetHeight) + 'px'; menuBackdrop.style.height = height; } @@ -84,23 +82,36 @@ once('cp_theme_d10_hover', '#cp_theme_d10_menu .top-node').forEach(function (el) { el.addEventListener('mouseenter', function () { + if (window.innerWidth < 992) { + return; + } clearTimeout(closeTimer); dwellTimer = setTimeout(function () { showDropdown(el); }, DWELL_TIME); }); el.addEventListener('mouseleave', function () { + if (window.innerWidth < 992) { + return; + } clearTimeout(dwellTimer); closeTimer = setTimeout(closeMenu, CLOSE_GRACE); }); el.addEventListener('focusin', function () { + if (window.innerWidth < 992) { + return; + } clearTimeout(dwellTimer); clearTimeout(closeTimer); showDropdown(el); }); el.addEventListener('focusout', function (event) { - if (!el.contains(event.relatedTarget) && committedTopNode === el) { + if (window.innerWidth < 992) { + return; + } + const nextTopNode = event.relatedTarget && event.relatedTarget.closest('#cp_theme_d10_menu .top-node'); + if (!el.contains(event.relatedTarget) && committedTopNode === el && !nextTopNode) { closeMenu(); } });