diff --git a/src/css/header.css b/src/css/header.css index 9acc168..f33620e 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -69,7 +69,8 @@ body { } .navbar-burger:not(.is-active) span { - transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s; + transition: transform ease-out 0.25s, opacity 0s 0.25s, + margin-top ease-out 0.25s 0.25s; } .navbar-burger span + span { @@ -221,12 +222,6 @@ body { align-items: center; } - .navbar-item.is-hoverable:hover .navbar-dropdown { - opacity: 1; - transform: translateY(0); - pointer-events: auto; - } - .navbar-link::after { border-width: 0 0 2px 2px; border-style: solid; @@ -267,15 +262,38 @@ body { width: 230px; padding: 1rem; border-radius: 6px; - box-shadow: var(--navbar-menu-boxshadow, 0 5px 30px 0 rgb(108 135 135 / 50%)); + box-shadow: var( + --navbar-menu-boxshadow, + 0 5px 30px 0 rgb(108 135 135 / 50%) + ); pointer-events: none; opacity: 0; - transition-duration: 86ms; - transform: translateY(-5px); - transition-property: opacity, transform; + visibility: hidden; z-index: 999; } + @keyframes dropdown { + from { + opacity: 0; + visibility: hidden; + transform: translateY(-5px); + } + 1% { + visibility: visible; + } + to { + visibility: visible; + opacity: 1; + transform: translateY(0); + pointer-events: auto; + } + } + + .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, + .navbar-item.is-hoverable:focus-within .navbar-dropdown { + animation: dropdown 86ms linear forwards; + } + .navbar-dropdown.lg { width: 300px; left: -20px; diff --git a/src/css/vars.css b/src/css/vars.css index e0ed3e3..56a791a 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -224,7 +224,7 @@ --z-index-nav: 1; --z-index-toolbar: 2; --z-index-page-version-menu: 3; - --z-index-navbar: 4; + --z-index-navbar: 100; } /* RESPONSIVE OVERRIDES */