Added submenus to work with hamburger menu

This commit is contained in:
Yohn 2025-01-17 04:45:55 -05:00
parent 39da3b69cc
commit ddd46d9875
254 changed files with 2946 additions and 398 deletions

View file

@ -2915,7 +2915,7 @@ body:has(dialog[open]) {
z-index: 1;
align-items: center;
width: 100%;
overflow: hidden;
overflow: visible;
}
.pico nav[role=navigation][data-position=start] {
/* remove the 'flex-direction' to move menu to the right */
@ -2938,6 +2938,10 @@ body:has(dialog[open]) {
@media (max-width: 510px) {
.pico nav[role=navigation] {
flex-wrap: wrap;
overflow: hidden;
}
.pico nav[role=navigation]:has(input[type=checkbox]:checked) {
overflow: visible;
}
.pico nav[role=navigation] label {
display: block;
@ -2975,6 +2979,10 @@ body:has(dialog[open]) {
@media (max-width: 700px) {
.pico nav[role=navigation][data-breakpoint=md] {
flex-wrap: wrap;
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=md]:has(input[type=checkbox]:checked) {
overflow: visible;
}
.pico nav[role=navigation][data-breakpoint=md] label {
display: block;
@ -3012,6 +3020,10 @@ body:has(dialog[open]) {
@media (max-width: 950px) {
.pico nav[role=navigation][data-breakpoint=lg] {
flex-wrap: wrap;
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=lg]:has(input[type=checkbox]:checked) {
overflow: visible;
}
.pico nav[role=navigation][data-breakpoint=lg] label {
display: block;
@ -3049,6 +3061,10 @@ body:has(dialog[open]) {
@media (max-width: 1200px) {
.pico nav[role=navigation][data-breakpoint=xl] {
flex-wrap: wrap;
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=xl]:has(input[type=checkbox]:checked) {
overflow: visible;
}
.pico nav[role=navigation][data-breakpoint=xl] label {
display: block;
@ -3086,6 +3102,10 @@ body:has(dialog[open]) {
@media (max-width: 1450px) {
.pico nav[role=navigation][data-breakpoint=xxl] {
flex-wrap: wrap;
overflow: hidden;
}
.pico nav[role=navigation][data-breakpoint=xxl]:has(input[type=checkbox]:checked) {
overflow: visible;
}
.pico nav[role=navigation][data-breakpoint=xxl] label {
display: block;