From c2f931f06aed3be5f77640355ff69c47d75dd86a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?benjamin=20melan=C3=A7on?= Date: Tue, 15 Jul 2025 08:39:56 -0400 Subject: [PATCH] Make the burger menu look nice before realizing details/summary cannot be nicely responsive One unmentioned con: The menu has to be repeated in HTML for this to switch responsively from spelled-out menu to hamburger, with the widescreen version outside the details. (Or JavaScript is needed to set the initial open/close state based on viewport size, and that seems to defeat the purpose.) Left as comment at https://lucas-levin.com/code/blog/burger-navigation-menu-with-no-javascript-and-no-checkbox-hack --- web/themes/custom/geofresco/src/global/_layout.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss index f46187d..f90730e 100644 --- a/web/themes/custom/geofresco/src/global/_layout.scss +++ b/web/themes/custom/geofresco/src/global/_layout.scss @@ -65,12 +65,14 @@ // Main navigation, goes to code in page.html.twig details .burger-icon { - transition: transform 0.1s; + cursor: pointer; display: block; + margin-left: auto; + margin-right: 0; + padding: 1.25rem 2.5rem 1rem 1.5rem; width: 1.5rem; height: 1.5rem; - padding: .25rem; - cursor: pointer; + transition: transform 0.1s; } details[open] .burger-icon {