From 26e6ec14c00a590293f064c9429ed25990013e17 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Sun, 9 Nov 2025 21:14:04 +0000 Subject: [PATCH] fix: make hamburger menu animation smooth The menu was appearing instantly without animation because the overflow property was changing from 'hidden' to 'auto' on hover, which disrupted the max-height transition. Fix: Keep overflow-y: auto consistent at all times. This allows the max-height animation to work smoothly from 0 to calc(100vh - 50px), creating a smooth top-to-bottom expansion effect. --- static/css/main.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 07b7d0c..57ad4df 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -2033,7 +2033,7 @@ a:focus { background: #ffffff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15); transition: max-height 0.4s ease-in-out; - overflow: hidden; + overflow-y: auto; z-index: 99; pointer-events: none; /* Disable pointer events when hidden */ } @@ -2042,14 +2042,12 @@ a:focus { .navigation-menu:hover, .navigation-menu.menu-hover { max-height: calc(100vh - 50px); - overflow-y: auto; pointer-events: auto; /* Enable pointer events when visible */ } /* Legacy class for JS compatibility - keep for backward compatibility */ .navigation-menu.menu-open { max-height: calc(100vh - 50px); - overflow-y: auto; pointer-events: auto; }