From b8df1d219b79b13ab122292276a971d2e455df03 Mon Sep 17 00:00:00 2001 From: Kevin Date: Tue, 24 Sep 2024 19:12:12 +1000 Subject: [PATCH] cherry-pick Kevin's mobile navbar fix from 2025 --- themes/mainroad/assets/css/style.css | 60 ++---------- themes/mainroad/layouts/partials/menu.html | 106 ++++++++++----------- 2 files changed, 59 insertions(+), 107 deletions(-) diff --git a/themes/mainroad/assets/css/style.css b/themes/mainroad/assets/css/style.css index b3f751c..2a08ad0 100644 --- a/themes/mainroad/assets/css/style.css +++ b/themes/mainroad/assets/css/style.css @@ -590,8 +590,6 @@ button:not(:-moz-focusring):focus > .menu__btn-title { background-repeat: no-repeat; background-position: center 0em; background-size: 1080px; - padding-top: 22em; - min-height: 430px; } @media screen and (min-width: 767px) { @@ -1444,11 +1442,6 @@ textarea { margin: 0; } - #banner-main { - padding-top: 2em; - min-height: 0px; - } - .logo { /* text-align: center; */ } @@ -1645,34 +1638,10 @@ button:not(:-moz-focusring):focus > .menu__btn-title { text-transform: uppercase; } -.menu__list .menu__item .submenu__list { - background: #2a2a2a; - visibility: hidden; - opacity: 0; - position: absolute; - max-width: 15rem; - transition: all 0.5s ease; - border-top: 5px solid #f5821f; - display: none; - } - - .menu__list .submenu__list .submenu__list { - width: 7rem; /* or your preferred narrow width */ -} - .menu__item.menu__dropdown input[type="checkbox"] { display: none; } -.menu__list .menu__item:hover > .submenu__list, -.menu__list .menu__item:focus-within > .submenu__list, -.menu__list .menu__item .submenu__list:hover, -.menu__list .menu__item .submenu__list:focus { - visibility: visible; - opacity: 1; - display: block; -} - .menu__link:hover { color: #fff; } @@ -1701,7 +1670,7 @@ highlightColor .menu__list--transition { -webkit-transform 0.15s ease; } @media screen and (min-width: 767px) { - /* .menu__list .menu__item:hover .submenu__list, + .menu__list .menu__item:hover .submenu__list, .menu__list .menu__item:focus-within .submenu__list, .menu__list .menu__item .submenu__list:hover, .menu__list .menu__item .submenu__list:focus { @@ -1723,7 +1692,7 @@ highlightColor .menu__list--transition { border-top: 5px solid #f5821f; display: none; - } */ + } .menu { border-bottom: 5px solid #f5821f; } @@ -1757,7 +1726,7 @@ highlightColor .menu__list--transition { top: auto; } - /* .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list { + .menu__item.menu__dropdown input[type="checkbox"] ~ .submenu__list { display: grid; opacity: 0; grid-template-rows: 0fr; @@ -1765,36 +1734,21 @@ highlightColor .menu__list--transition { transition-property: opacity, grid-template-rows, visibility !important; } - .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list { + .menu__item.menu__dropdown input[type="checkbox"]:checked ~ .submenu__list { grid-template-rows: 1fr; border: none; opacity: 1; position: relative; max-width: 100%; visibility: visible; - } */ - + } - .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list { - display: none; - } - - .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list { - border: none; - padding-left: 20px; - visibility: visible; - opacity: 1; - display: block; - position: relative; - max-width: 100%; - } - - /* .menu__item.menu__dropdown input[type="checkbox"] ~ .submenu__list > * { + .menu__item.menu__dropdown input[type="checkbox"] ~ .submenu__list > * { overflow-y: hidden; } .menu__item.menu__dropdown input[type="checkbox"] ~ .submenu__list > * > * { padding-left: 20px; - } */ + } } @media screen and (max-width: 620px) { diff --git a/themes/mainroad/layouts/partials/menu.html b/themes/mainroad/layouts/partials/menu.html index fd40650..6c7e25b 100644 --- a/themes/mainroad/layouts/partials/menu.html +++ b/themes/mainroad/layouts/partials/menu.html @@ -1,82 +1,80 @@ {{- if .Site.Menus.main }} + {{ else -}}
{{- end }} \ No newline at end of file