geo/geo-coop
geo/geo-coop
7
1
Fork 0
Code Issues 54 Pull requests Projects Releases Packages Wiki Activity Actions

Make the burger menu look nice before realizing details/summary cannot be nicely responsive

Browse source 
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
This commit is contained in:
benjamin melançon 2025-07-15 08:39:56 -04:00
parent 234bc216c5
commit c2f931f06a
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/themes/custom/geofresco/src/global/_layout.scss
View file

@ -65,12 +65,14 @@
// Main navigation, goes to code in page.html.twig // Main navigation, goes to code in page.html.twig
details .burger-icon { details .burger-icon {
transition: transform 0.1s; cursor: pointer;
display: block; display: block;
margin-left: auto;
margin-right: 0;
padding: 1.25rem 2.5rem 1rem 1.5rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
padding: .25rem; transition: transform 0.1s;
cursor: pointer;
} }
details[open] .burger-icon { details[open] .burger-icon {