From 66209846d5bc21dc21d79290b328de247bedcb09 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 13 Jan 2023 09:04:34 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20hamburger=20menu=20positio?= =?UTF-8?q?ning=20in=20mobile=20browsers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #399 --- CHANGELOG.md | 1 + assets/css/compiled/main.css | 1 + assets/css/main.css | 2 +- layouts/partials/header/hamburger.html | 4 ++-- layouts/partials/header/hybrid.html | 6 +++--- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e143fa0..11f0cdcf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Code highlight background cut off in Google Chrome when overflowing content area ([#383](https://github.com/jpanther/congo/pull/383)) - Social icons shift position during CSS transition when hovered in Safari ([#396](https://github.com/jpanther/congo/pull/396)) +- Hamburger navigation menu is misaligned in mobile browsers ([#399](https://github.com/jpanther/congo/pull/399)) - Error when attempting to resize SVG assets in page bundles ([#427](https://github.com/jpanther/congo/pull/427)) - Appearance switcher missing `aria-label` ([#438](https://github.com/jpanther/congo/pull/438)) - Article links missing `alt` text and `aria-label` ([#439](https://github.com/jpanther/congo/pull/439)) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index f2051789..67dc7632 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1020,6 +1020,7 @@ body button { /* Hamburger menu */ body:has(#menu-controller:checked) { + position: fixed; overflow-y: hidden; } diff --git a/assets/css/main.css b/assets/css/main.css index 6c5e70fd..2d7ab691 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -23,7 +23,7 @@ body button { /* Hamburger menu */ body:has(#menu-controller:checked) { - @apply overflow-y-hidden; + @apply fixed overflow-y-hidden; } #menu-button:has(#menu-controller:checked) { @apply invisible; diff --git a/layouts/partials/header/hamburger.html b/layouts/partials/header/hamburger.html index c328994c..495d3fbf 100644 --- a/layouts/partials/header/hamburger.html +++ b/layouts/partials/header/hamburger.html @@ -14,10 +14,10 @@