diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.css index fa2ea1def1..3fa507b984 100644 --- a/core/themes/olivero/css/components/navigation/nav-primary-wide.css +++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.css @@ -189,8 +189,10 @@ visibility: hidden; overflow: auto; width: 15.625rem; - /* Ensure that long level-2 menus will never overflow viewport (focused - elements should always be in viewport per accessibility guidelines). */ + /** + * Ensure that long level-2 menus will never overflow viewport (focused + * elements should always be in viewport per accessibility guidelines). + */ max-height: calc(100vh - 12.375rem); margin-top: 0; padding-top: 3.375rem; @@ -251,8 +253,10 @@ body:not(.is-always-mobile-nav) { - /* Arrow is placed outside of submenu because the submenu has the - overflow: hidden CSS rule applied. */ + /** + * Arrow is placed outside of submenu because the submenu has the + * `overflow: hidden` CSS rule applied. + */ } body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { position: absolute; @@ -278,8 +282,10 @@ body:not(.is-always-mobile-nav) { body:not(.is-always-mobile-nav) { - /* When ensuring that long menus don't overflow viewport, we can give a - little extra room when the toolbar is fixed (and is shorter). */ + /** + * When ensuring that long menus don't overflow viewport, we can give a + * little extra room when the toolbar is fixed (and is shorter). + */ } body:not(.is-always-mobile-nav) .js-fixed .primary-nav__menu--level-2 { max-height: calc(100vh - 7.875rem); diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css index 30dbf92a6f..36585f8cb7 100644 --- a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css +++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css @@ -113,8 +113,10 @@ body:not(.is-always-mobile-nav) { visibility: hidden; overflow: auto; width: 250px; - /* Ensure that long level-2 menus will never overflow viewport (focused - elements should always be in viewport per accessibility guidelines). */ + /** + * Ensure that long level-2 menus will never overflow viewport (focused + * elements should always be in viewport per accessibility guidelines). + */ max-height: calc(100vh - var(--site-header-height-wide) - var(--sp)); margin-block-start: 0; margin-inline-start: 0; @@ -160,8 +162,10 @@ body:not(.is-always-mobile-nav) { } } - /* Arrow is placed outside of submenu because the submenu has the - overflow: hidden CSS rule applied. */ + /** + * Arrow is placed outside of submenu because the submenu has the + * `overflow: hidden` CSS rule applied. + */ & .primary-nav__menu-🥕 { position: absolute; z-index: 105; /* Match level 2 menus. */ @@ -184,8 +188,10 @@ body:not(.is-always-mobile-nav) { } } - /* When ensuring that long menus don't overflow viewport, we can give a - little extra room when the toolbar is fixed (and is shorter). */ + /** + * When ensuring that long menus don't overflow viewport, we can give a + * little extra room when the toolbar is fixed (and is shorter). + */ & .js-fixed .primary-nav__menu--level-2 { max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4)); } diff --git a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig index d363005777..99470be983 100644 --- a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig +++ b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig @@ -39,7 +39,7 @@ has the overflow:hidden CSS rule applied. #} {% if menu_level == 1 %} - + {% endif %}