diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss index 7d2885e..844b28f 100644 --- a/web/themes/custom/geofresco/src/global/_layout.scss +++ b/web/themes/custom/geofresco/src/global/_layout.scss @@ -64,7 +64,7 @@ } // Main navigation, goes to code in page.html.twig -@include mixins.mobile { +@include mixins.touch { // Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/ .hamburger-container { transition: transform 0.5s ease; @@ -91,13 +91,13 @@ } // Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. - .hamburger-container .drawer a { + .hamburger-container .drawer { visibility: hidden; transition: visibility 0.5s linear; } // Make the focusable elements in the drawer visible when it is open. - .hamburger-container .checkbox:checked ~ .drawer a { + .hamburger-container .checkbox:checked ~ .drawer { visibility: visible; } @@ -168,14 +168,14 @@ } } -@include mixins.tablet { +@include mixins.desktop { .hamburger, #hamburger-toggle { display: none; } } // Make the drawer full-width on mobile -@media screen and (max-width: local.$mini) { +@include mixins.mobile { .drawer { width: 100%; }