From eb364b5367f2108e030b48b44b1c6b97fd34fdb1 Mon Sep 17 00:00:00 2001 From: Ronan Dowling Date: Thu, 6 Feb 2025 15:54:27 +0000 Subject: [PATCH] Fixed menu wrapping on md and bigger screens --- dist/main.compiled.css | 54 +++++++++++++++++------------------------- src/colors.css | 14 ++++++----- src/main.css | 29 +++++++++++++---------- 3 files changed, 47 insertions(+), 50 deletions(-) diff --git a/dist/main.compiled.css b/dist/main.compiled.css index 1bf5f8e..481e4f8 100644 --- a/dist/main.compiled.css +++ b/dist/main.compiled.css @@ -4108,10 +4108,8 @@ html .layout .l-sidebar + .l-content{ /* Menus */ -.js .menu-dropdown > li > a, -.js .menu-dropdown > li > a:hover, -.js .menu-dropdown > li > a:focus, -.js .menu-dropdown > li > a:active{ +.js .menu-dropdown > li > a, .js .menu-dropdown > li > a:hover, .js .menu-dropdown > li > a:focus, .js .menu-dropdown > li > a:active, .js .menu-tree > li > a, .js .menu-tree > li > a:hover, .js .menu-tree > li > a:focus, .js .menu-tree > li > a:active{ + text-wrap: wrap; padding: 0; } @@ -4241,7 +4239,7 @@ html .layout .l-sidebar + .l-content{ } .block-system-main-menu .block-content > ul > li a.has-submenu, .block-system-main-menu .block-content > ul > li a:hover.has-submenu{ - padding-right: 0; + padding-right: 3rem; } .block-system-main-menu .block-content > ul > li a::before { @@ -4268,7 +4266,7 @@ html .layout .l-sidebar + .l-content{ } .block-system-main-menu .block-content > ul > li span.sub-arrow{ - top: 2rem; + top: 2.5rem; border-style: none; margin: 0; height: 1.2rem; @@ -4279,38 +4277,19 @@ html .layout .l-sidebar + .l-content{ background-repeat: none; background-position: center center; transition: transform 0.25s ease-out; -} - -@media (min-width: 768px){ - .block-system-main-menu .block-content > ul > li span.sub-arrow{ - position: relative; - top: 50%; - right: 0; - display: inline-block; - } -} - -.block-system-main-menu .block-content > ul > li span.sub-arrow{ - right: 2rem; + position: absolute; + right: 1rem; + --tw-rotate: -90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 768px){ .block-system-main-menu .block-content > ul > li span.sub-arrow{ right: 0; } -} -.block-system-main-menu .block-content > ul > li li .sub-arrow{ - position: absolute; - right: 2rem; - top: 2.5rem; - --tw-rotate: -90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -@media (min-width: 768px){ - .block-system-main-menu .block-content > ul > li li .sub-arrow{ - right: 1rem; + .block-system-main-menu .block-content > ul > li li span.sub-arrow{ + right: 2rem; } } @@ -4426,6 +4405,7 @@ html .layout .l-sidebar + .l-content{ float: left; margin-left: 0.5rem; margin-right: 0.5rem; + align-content: flex-end; border-width: 0px; } } @@ -4466,12 +4446,14 @@ html .layout .l-sidebar + .l-content{ } .l-header .block-system-main-menu .block-content > ul > li > a{ - font-size: 2rem; border-width: 0px; + font-size: 2rem; } @media (min-width: 768px){ .l-header .block-system-main-menu .block-content > ul > li > a{ + bottom: 0; + margin-top: auto; padding-left: 0; padding-right: 0; padding-top: 2rem; @@ -4479,6 +4461,14 @@ html .layout .l-sidebar + .l-content{ } } +.l-header .block-system-main-menu .block-content > ul > li > a{ + white-space: normal; +} + +.l-header .block-system-main-menu .block-content > ul > li > a.has-submenu, .l-header .block-system-main-menu .block-content > ul > li > a:hover.has-submenu{ + padding-right: 3rem; +} + .l-header .block-system-main-menu .block-content > ul > li > a::before{ display: none; height: 0.6rem; diff --git a/src/colors.css b/src/colors.css index 5dc50f5..1c69dca 100644 --- a/src/colors.css +++ b/src/colors.css @@ -1,6 +1,8 @@ html body, .l-header, -.menu-dropdown +.menu-dropdown, +.l-header .menu, +.l-header .menu ul { background-color: #FFFFFE; color: #2E2D28; @@ -112,11 +114,11 @@ body .header-menu .links a:after { } .l-header .l-header-inner .block-system-main-menu ul, -.menu-dropdown ul a:hover, -.menu-dropdown ul a:focus, -.menu-dropdown ul a:active, -.menu-dropdown ul a.highlighted, -.menu-dropdown ul a +.l-header .menu ul a:hover, +.menu ul a:focus, +.l-header .menu ul a:active, +.l-header .menu ul a.highlighted, +.l-header .menu ul a { background-color: #FFFFFE; } diff --git a/src/main.css b/src/main.css index 413d016..a06df8e 100644 --- a/src/main.css +++ b/src/main.css @@ -427,10 +427,10 @@ html .layout { /* Menus */ .js .menu-dropdown > li > a, -.js .menu-dropdown > li > a:hover, -.js .menu-dropdown > li > a:focus, -.js .menu-dropdown > li > a:active { - @apply p-0; +.js .menu-tree > li > a { + &, &:hover, &:focus, &:active { + @apply p-0 text-wrap; + } } .menu, @@ -503,7 +503,7 @@ html .layout { @apply scale-100 bg-fog; } a.has-submenu, a:hover.has-submenu { - @apply pr-0; + @apply pr-30; } a::before { content: ''; @@ -516,11 +516,11 @@ html .layout { @apply scale-100; } span.sub-arrow { - @apply border-none caret top-20 md:top-1/2 md:right-0 md:relative md:inline-block; - @apply right-20 md:right-0; + @apply border-none caret top-25; + @apply absolute right-10 md:right-0 -rotate-90; } - li .sub-arrow { - @apply absolute right-20 md:right-10 top-25 -rotate-90; + li span.sub-arrow { + @apply md:right-20; } a.highlighted span.sub-arrow { @apply rotate-0; @@ -567,7 +567,7 @@ html .layout { @apply m-0; } > li { - @apply md:float-left md:mx-5 lg:mr-10 xl:mr-20 md:border-0; + @apply md:float-left md:mx-5 lg:mr-10 xl:mr-20 md:border-0 md:content-end; ul { @apply pl-20 border-0; @apply md:pl-0 md:shadow-md md:absolute; @@ -580,8 +580,13 @@ html .layout { @apply md:mr-0; } > a { - @apply text-20; - @apply md:px-0 md:py-20 border-0; + @apply text-20 border-0; + @apply md:px-0 md:py-20 md:mt-auto md:bottom-0; + @apply whitespace-normal; + + &.has-submenu, &:hover.has-submenu { + @apply pr-30; + } &::before { @apply hidden md:block h-6 w-full scale-x-0 scale-y-100;